Vue TypeError _vm 不是一个函数

在我的Vue组件中，称为Home.vue，我包含这个谷歌地图插件，如下所示

<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)

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

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

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

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

相关内容

最新更新

热门标签：