javascript Vue TypeError _vm 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52266216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue TypeError _vm is not a function
提问by GGrec
In my Vue component , called Home.vue, I am including this Google Maps plugin, as follow
在我的名为 Vue 组件中，Home.vue我包含了这个 Google Maps 插件，如下所示
<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>
The object resultscomes from a parent tag, and m.locationCoordinatesis a String. The :positionof GmapMarkerneeds a JSON Object. I am defining a getMarkerPositionfunction to transform that string into JSON, like so
该对象results来自父标签，并且m.locationCoordinates是一个String. 该:position的GmapMarker需求JSON对象。我正在定义一个getMarkerPosition函数来将该字符串转换为 JSON，就像这样
export default {
methods: {
getMarkerPosition: function (coordinateString) {
let split = coordinateString.split(',')
return {
lat: parseFloat(split[0]),
lng: parseFloat(split[1])
}
}
}
}
but I'm ending up with a browser error saying
但我最终遇到了一个浏览器错误说
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)```
The entire code is in Home.vue. I only declare Vue.use(VueGoogleMaps)in main.js
整个代码在Home.vue. 我只声明Vue.use(VueGoogleMaps)中main.js
采纳答案by GGrec
I want to share my solution in case anyone runs into a similar issue.
我想分享我的解决方案，以防有人遇到类似问题。
The main problem was that my GmapMap's parent was another component called ais-results(from Vue InstantSearch) which had the inline-templateattribute. That means whatever is inside the ais-resultstag won't be able to see 'outside'.
主要问题是我GmapMap的父组件是另一个名为ais-results（来自Vue InstantSearch）的组件，它具有该inline-template属性。这意味着ais-results标签内部的任何内容都无法看到“外部”。
My elegant solution was to extract the GmapMapin a separate component/file where I can define all my required methods. When I use my new component, I just pass data to it as props.
我优雅的解决方案是将 提取到GmapMap一个单独的组件/文件中，我可以在其中定义所有需要的方法。当我使用我的新组件时，我只是将数据作为props.
Another solution would be to avoid the inline-templateattribute.
另一种解决方案是避免使用该inline-template属性。
Related questions and resources:
相关问题和资源：
- Vue: method is not a function within inline-template component tag
- Vue inline template not finding methods or data
- https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d
- https://community.algolia.com/vue-instantsearch/components/results.html
- Vue：方法不是内联模板组件标签中的函数
- Vue 内联模板找不到方法或数据
- https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d
- https://community.algolia.com/vue-instantsearch/components/results.html
Keep in mind I'm a beginner in reactivity and Vue stuff. Cheers
请记住，我是反应性和 Vue 方面的初学者。干杯
