Vue TypeError _vm이 함수가 아닙니다.

Vue TypeError _vm이 함수가 아닙니다.

내 Vue 컴포넌트에서는,Home.vue다음과 같이 이 구글 지도 플러그인을 포함합니다.

<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의GmapMarkerJSON 오브젝트가 필요합니다.정의하다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

누군가 비슷한 문제에 직면했을 때를 대비해서 제 해결책을 공유하고 싶습니다.

가장 큰 문제점은 내 것이GmapMap의 부모는 다른 컴포넌트입니다.ais-results(Vue Instant Search에서)는,inline-template기여하다.그 말은 그 안에 뭐가 있든ais-results태그는 'tag'를 볼 수 없습니다.

내 우아한 해결책은 그 모든 것을 추출하는 것이었다.GmapMap필요한 모든 방법을 정의할 수 있는 별도의 컴포넌트/파일에 저장됩니다.새 컴포넌트를 사용할 때 데이터를 다음과 같이 전달합니다.props.

또 다른 해결방법은 다음과 같은 문제를 회피하는 것입니다.inline-template기여하다.

관련 질문 및 리소스:

1. Vue: 메서드가 인라인 템플릿 구성 요소 태그 내의 함수가 아닙니다.
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

난 반응성이나 Vue 같은 건 초보라는 걸 명심해건배.

언급URL : https://stackoverflow.com/questions/52266216/vue-typeerror-vm-is-not-a-function