2016-07-05 2 views
0

하위 VUE 인스턴스 내에서 메소드를 호출하려고하는데 작동하지 않는 이유를 알 수 없습니다. v-on:click="lookupAddress" expects a function value, got undefinedVue JS의 부모/자식 메소드

:

var content = new Vue({ 
    el: '.content-container', 
}); 

아이

var vm = new Vue({ 
    el: '#form', 
    parent: content, 
    data: { 
     postcode: null, 
    }, 
    methods: { 
     lookupAddress: function (event) { 
      event.preventDefault(); 
      // Lookup Address 
     }, 
    }, 
}); 

는 그러나, 나는 뷰 개발 도구에서 다음과 같은 오류가 계속

부모 다음과 같이

내 뷰입니다

하위 인스턴스에서 메소드를 선택하지 않는 이유에 대한 아이디어가 있습니까? childs 요소 내에서 메서드를 호출합니다. 두 뷰 인스턴스를 만들 것을 나는 당신의 문제가 여기보고 있어요 무엇을 기반으로

<body> 
    <div class="content-container"> 
     <form id="form"> 
      ... 
     </form> 
    </div> 
</body> 
+0

마크 업이 @YerkoPalma –

+0

추가 된 HTML이 필요하지만, 아마이 방법 lookupAddress 부모 VUE에 있어야합니다 생각하기 때문에 (그리고 아이보고 아니에요). 중첩 된 vue 인스턴스를 생성해야하는지 잘 모르겠다. 아마도 자식 대신 구성 요소를 살펴보아야 할 것입니까? –

+2

그냥 추측 위에 – temporalslide

답변

1

는 다음과 같이

편집 내 HTML 마크 업입니다. 인스턴스간에 데이터와 메소드를 공유하기가 어려워집니다. 단일 인스턴스를 만들고 구성 요소를 사용하여 다리 작업을 수행하는 것이 훨씬 간단합니다. 일부 읽기 : http://vuejs.org/guide/components.html

+0

하위 인스턴스에서 구성 요소를 사용 하시겠습니까, 아니면 하위 인스턴스를 제거 하시겠습니까? SPA가 될 수는 없다는 것을 명심하십시오 –

+0

Vue 인스턴스에서 구성 요소를 사용하게됩니다. Vue 인스턴스의 "components"속성 객체를 통해 Vue가 컴포넌트에 대해 알게했습니다. 그러한처럼 : 'var에 VM = 새로운 뷰 ({ 엘 '.content 컨테이너', compontents : { componenteName : '구성 요소 이름' } });' 문서는 매우 광범위하고 Vue 사용의 큰 부분. 자세하게 살펴볼 것을 권한다. –

관련 문제