Vue TypeError _vm is not a function

Question

In my Vue component , called Home.vue, I am including this Google Maps plugin, as follow

The object results comes from a parent tag, and m.locationCoordinates is a String. The :position of GmapMarker needs a JSON Object. I am defining a getMarkerPosition function to transform that string into JSON, like so

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

user_1774643 · Answer

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.

Vue TypeError _vm is not a function

1 Answers