ajaxのロード後にVuejs2を再初期化

Question

これを見て回ったが解決策が見つかりません。

私はページにロードされた.vueファイルを持っており、ユーザーはvueコンポーネントが表示されている場所を含むいくつかのコンテンツを置き換えるページにajax負荷をかけるボタンをクリックできます。

auaxコールは、Vueの外部で発生し、vueコンポーネントを含むコンテンツを置き換えます。

ajaxが完了すると、Vueコンポーネントは表示されません。 Vueを手動で再初期化する方法はありますか？

おかげ

Answer 1

それはおそらく最良の方法はありませんが、それだけで（私は多くのVueを使用していない、これを実行しない理由があるかもしれない）新しいVueのインスタンスを作成し動作します。

は、私がここに短いテストを行ってきた：https://jsfiddle.net/yazbx35d/

new Vue({ 
    el: '#app', 
    data: { 
    message: 'Hello Vue.js!' 
    } 
}); 

$('#app').empty().append($('<p></p>', { 
    text: '{{newMessage}}' 
})); 

new Vue({ 
    el: '#app', 
    data: { 
    newMessage: 'Hello again Vue.js!' 
    } 
}); 

Answer 2

私が理解から、あなたはEvent Busとして独立したVueのインスタンスを作成することができ、AJAX呼び出しが完了したときにそれを使用してイベントを発します。コンポーネントまたはメインのVueインスタンス内のイベントをリッスンし、コンポーネントを更新します。 ）（

bus.$on('update', function (id) { 
    // ... 
})