Vue TypeError _vm is not a function
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-template
attribute. That means whatever is inside the ais-results
tag won't be able to see 'outside'.
My elegant solution was to extract the GmapMap
in 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
.
Another solution would be to avoid the inline-template
attribute.
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
Keep in mind I'm a beginner in reactivity and Vue stuff. Cheers
Comments
-
Georgian almost 2 years
In my Vue component , called
Home.vue
, I am including this Google Maps plugin, as follow<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
results
comes from a parent tag, andm.locationCoordinates
is aString
. The:position
ofGmapMarker
needs a JSON Object. I am defining agetMarkerPosition
function to transform that string into JSON, like soexport 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 declareVue.use(VueGoogleMaps)
inmain.js