wake-up-neo.net

Vue TypeError _vm ist keine Funktion

In meiner Vue-Komponente mit dem Namen Home.vue füge ich dieses Google Maps-Plugin ein, wie folgt

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

Das Objekt results stammt aus einem übergeordneten Tag und m.locationCoordinates ist eine String. Der :position von GmapMarker benötigt ein JSON-Objekt. Ich definiere eine getMarkerPosition-Funktion, um diese Zeichenfolge in JSON umzuwandeln

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

aber ich habe am Ende einen Browser-Fehler 

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

Der gesamte Code befindet sich in Home.vue. Ich erkläre nur Vue.use(VueGoogleMaps) in main.js

3
GGrec

Ich möchte meine Lösung mitteilen, falls jemand auf ein ähnliches Problem stößt.

Das Hauptproblem war, dass das Elternelement meines GmapMap eine andere Komponente namens ais-results (von Vue InstantSearch ) war, die das inline-template-Attribut hatte. Dies bedeutet, dass das, was sich innerhalb des ais-results-Tags befindet, nicht in der Lage ist, "außerhalb" zu sehen. 

Meine elegante Lösung bestand darin, GmapMap in einer separaten Komponente/Datei zu extrahieren, in der ich alle erforderlichen Methoden definieren kann. Wenn ich meine neue Komponente verwende, gebe ich einfach Daten als props an sie weiter.

Eine andere Lösung wäre, das inline-template-Attribut zu vermeiden. 

Verwandte Fragen und Ressourcen:

  1. Vue: Methode ist keine Funktion innerhalb des Komponenten-Tags inline-template
  2. Vue Inline-Vorlage findet keine Methoden oder Daten
  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

Denken Sie daran, ich bin ein Anfänger in Sachen Reaktivität und Vue-Sachen. Prost

1
GGrec