web-dev-qa-db-fra.com

Vue TypeError _vm n'est pas une fonction

Dans mon composant Vue, appelé Home.vue, j'inclus ce plugin Google Maps , comme suit

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

L'objet results provient d'une balise parent et m.locationCoordinates est une String. Le :position de GmapMarker nécessite un objet JSON. Je définis une fonction getMarkerPosition pour transformer cette chaîne en JSON, comme si

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

mais je me retrouve avec une erreur de navigateur en disant 

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

Le code entier est en Home.vue. Je déclare seulement Vue.use(VueGoogleMaps) dans main.js

javascriptgoogle-mapsvue.jsvuejs2vue-component
3
GGrec

Je souhaite partager ma solution au cas où quelqu'un rencontrerait un problème similaire.

Le principal problème était que le parent de ma GmapMap était un autre composant appelé ais-results (de Vue InstantSearch ) qui avait l'attribut inline-template. Cela signifie que tout ce qui est à l'intérieur de la balise ais-results ne pourra pas voir «à l'extérieur». 

Ma solution élégante consistait à extraire la GmapMap dans un fichier/composant séparé dans lequel je peux définir toutes les méthodes requises. Lorsque j'utilise mon nouveau composant, je lui passe simplement les données sous la forme props.

Une autre solution serait d’éviter l’attribut inline-template. 

Questions et ressources connexes:

  1. Vue: la méthode n'est pas une fonction dans la balise de composant inline-template
  2. Le modèle Vue inline ne trouvant pas de méthodes ni de données
  3. https://medium.com/js-dojo/7-ways-to-define-a-component-template-in-vuejs-c04e0c72900d
  4. https://community.algolia.com/vue-instantsearch/components/results.html

N'oubliez pas que je suis un débutant en réactivité et dans le domaine Vue. À votre santé

1
GGrec