Vue TypeError _vm не является функцией - PullRequest
Новая
       6

Vue TypeError _vm не является функцией

0 голосов
/ 11 сентября 2018

В моем компоненте 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>

Объект 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])
            }
     }
  }
  }

, но я получаю сообщение об ошибке браузера: 

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

Весь код в Home.vue. Я только заявляю Vue.use(VueGoogleMaps) в main.js

1 Ответ

0 голосов
/ 11 сентября 2018

Я хочу поделиться своим решением на случай, если кто-нибудь столкнется с подобной проблемой.

Основная проблема заключалась в том, что родителем моего GmapMap был другой компонент с именем ais-results (из Vue InstantSearch ), который имел атрибут inline-template. Это означает, что все, что находится внутри тега ais-results, не сможет видеть «снаружи».

Моим элегантным решением было извлечь GmapMap в отдельный компонент / файл, где я могу определить все необходимые методы. Когда я использую свой новый компонент, я просто передаю ему данные как props.

Другим решением было бы избежать атрибута inline-template.

Похожие вопросы и ресурсы:

  1. Vue: метод не является функцией внутри тега компонента inline-template
  2. Встроенный шаблон Vue не находит методы или данные
  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

Имейте в виду, что я новичок в реактивности и вью. Приветствия

...