Vue TypeError _vm 不是函数答案

【问题标题】：Vue TypeError _vm is not a functionVue TypeError _vm 不是函数
【发布时间】：2019-02-15 09:15:09
【问题描述】：

在我的Vue组件中，称为Home.vue，我包括this Google Maps plugin，如下

<GmapMap
 :center="{lat: 45.919849, lng: 25.0203875}"
 :zoom="7"
   map-type-id="terrain"
  style="width: 100%; height: 600px"
   >
<GmapMarker
:key="markerIdx"
v-for="(m, markerIdx) in results"
:position="getMarkerPosition(m.locationCoordinates)"
:clickable="true"
:draggable="false"
/>
</GmapMap>

对象results 来自父标签，m.locationCoordinates 是String。 GmapMarker 的 :position 需要一个 JSON 对象。我正在定义一个 getMarkerPosition 函数来将该字符串转换为 JSON，就像这样

export default {
      methods: {
   getMarkerPosition: function (coordinateString) {
          let split = coordinateString.split(',')
           return {
            lat: parseFloat(split[0]),
            lng: parseFloat(split[1])
            }
     }
  }
  }

但我最终会遇到浏览器错误提示

TypeError: _vm.getMarkerPosition is not a function
 at eval (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?            
 {"id":"data-v-8dc7cce2","hasScoped":false,"transformToRequire":{"video": 
  ["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble": 
 {"transforms":{}}}!./node_modules/vue-loader/lib/selector.js? 
 type=template&index=0!./src/components/Home.vue 
 (0.96557ac29cc33c9d2325.hot-update.js:22), <anonymous>:180:63)
  at Proxy.renderList (vue.esm.js?efeb:3705)
  at Proxy.render (eval at ./node_modules/vue-loader/lib/template- 
  compiler/index.js?{"id":"data-v- 
  8dc7cce2","hasScoped":false,"transformToRequire":{"video": 

 ["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble": 
 {"transforms":{}}}!./node_modules/vue-loader/lib/selector.js? 
  type=template&index=0!./src/components/Home.vue 
 (0.96557ac29cc33c9d2325.hot-update.js:22), <anonymous>:173:47)
   at VueComponent.Vue._render (vue.esm.js?efeb:4544)
   at VueComponent.updateComponent (vue.esm.js?efeb:2788)
   at Watcher.get (vue.esm.js?efeb:3142)
   at Watcher.run (vue.esm.js?efeb:3219)
   at flushSchedulerQueue (vue.esm.js?efeb:2981)
   at Array.eval (vue.esm.js?efeb:1837)
   at flushCallbacks (vue.esm.js?efeb:1758)```

整个代码在Home.vue。我只在main.js中声明Vue.use(VueGoogleMaps)

【问题讨论】：

你的文件结构是什么，哪个文件有 getMarkerPosition 声明？
@NickTucci 一切都在一个文件中，Home.vue。我只在main.js中做一个Vue.use(VueGoogleMaps)
尝试用computed 替换methods 我认为:position 接受计算属性
去掉:position="getMarkerPosition(m.locationCoordinates)"，再添加<h1>{{getMarkerPosition}}</h1>，渲染出来的是什么？
如果对对象进行硬编码，它会起作用吗？

标签： javascript google-maps vue.js vuejs2 vue-component

【解决方案1】：

我想分享我的解决方案，以防有人遇到类似问题。

主要问题是我的GmapMap 的父级是另一个名为ais-results 的组件（来自Vue InstantSearch），它具有inline-template 属性。这意味着ais-results 标签内的任何内容都无法看到“外部”。

我的优雅解决方案是将GmapMap 提取到一个单独的组件/文件中，我可以在其中定义所有需要的方法。当我使用我的新组件时，我只是将数据作为props 传递给它。

另一个解决方案是避免使用inline-template 属性。