2016-07-05 7 views
0

子VUEインスタンス内でメソッドを呼び出そうとしていますが、なぜ動作していないのかわかりません。Vue JSの親/子メソッド

次のように私のVueがある:

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

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

子供はしかし、私はVueの開発ツール内で次のエラーを取得しておいてください。v-on:click="lookupAddress" expects a function value, got undefined

子インスタンスのメソッドを選択しない理由についてのアイデアはありますか?私はchilds要素内のメソッドを呼び出しています。

編集 次のように私のHTMLマークアップは次のとおりです。私はここにあなたの問題を見ているものに基づい

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

あなたのマークアップが@YerkoPalma –

+0

を追加しましたHTMLを必要とされますが、おそらくそれは、メソッドlookupAddressが親VUEにする必要があります考えているので(それは子供を見ていないです)。ネストされたvueインスタンスを作成する必要があるかどうかは不明ですが、おそらく子コンポーネントのコンポーネントを調べるのでしょうか? –

+2

だけの推測の上 – temporalslide

答えて

1

は、2つのVueのインスタンスを作成しているということです。インスタンス間でデータとメソッドを共有することは困難になります。 1つのインスタンスを作成し、コンポーネントを使用して脚の作業を行う方がはるかに簡単です。いくつかの読書:http://vuejs.org/guide/components.html

+0

子インスタンスでコンポーネントを使用するか、子インスタンスを削除しますか?これはSPAにならないことに注意してください –

+0

Vueインスタンスでコンポーネントを使用します。 Vueインスタンスの "components"プロパティオブジェクトを使用して、コンポーネントについての情報をVueに通知させます。このような等: 'VARのVM =新しいヴュー({ EL '.contentコンテナ' compontents:{ componenteName: 'コンポーネント名' } });' ドキュメントは非常に広範であり、そしてVueを使用する大きな部分です。私は詳細にそれを通過することをお勧めしたい –

関連する問題