AJAX部分ロード後のVueバインド？

Question

私はちょうどVue.jsを使い始めており、しばらく構築してきたアプリケーションに組み込むことを試みています。私のアプリはLaravel、相当量のjQueryなどを使って構築されています。

私のアプリのすべてのナビゲーション要素は、部分ビューを返すためにAJAX（Vue経由ではありません）を使用しています。したがって、内部リンクまたはフォーム提出は、AJAX経由でLaravelルートに提出され、部分的に返されます。

私は最初のVueインスタンスを設定しましたが、訪問者がVueインスタンスが使用されているページに最初にアクセスしたときに要素にのみバインドされます。 Vueインスタンスはまだ存在しますが、ユーザーがページから離れて戻ったときに要素へのバインディングが失われます。おそらく、ユーザーがナビゲートしたときにDOMから要素が削除されたためです。

DOMに戻るとき（Vueで実行されないAJAXロードを介して）、Vueを要素にバインドさせるにはどうすればよいですか？ （エリクサー/ Browserifyで消費される）

マイmain.js：

window.MaintenanceStatus = require('./components/Status.js'); 

Status.js

var Vue = require('vue'); 
Vue.use(require('vue-resource')); 

module.exports = new Vue({ 
    el: '#app', 

    data: { 
     message: '' 
    }, 

    ready: function() { 
     this.message = 'loading ...'; 
    }, 

    methods: { 
     setMessage: function(message) { 
      this.message = message; 
     }, 

     getStatus: function(url, data) { 
      this.message = 'loading ...'; 
      this.$http.get(url, data) 
       .success(function(result) { 
        console.log('Status get success'); 
        this.setMessage(result); 
       }) 
       .error(function() { 
        console.log('Status get error'); 
        this.setMessage('Error'); 
       }); 
     } 
    } 
}); 

AJAXを介して返される部分/テンプレートで消費するコード...

@extends('layouts.partials.content') 


@section('content') 
    <div id="app"> 
     <pre>@{{ $data | json }}</pre> 
    </div> 
@stop 

@section('javascript') 
<script type="text/javascript" class="document-script"> 
$(function() 
{ 
    var href ... 
    var data {...} 

    MaintenanceStatus.getStatus(href, data); 
}); 
</script> 
@stop 

フルページの更新時に機能することに注意してください。ただし、別のページに移動すると（これもAJAX呼び出しです）私はこのビューに戻ります、私はちょうど{{$ data | json}} ... Vueはapp要素へのバインドを失ったようです。どうすれば元に戻すことができますか？

DOMを残してコンポーネントを作成していない要素にVueインスタンスをバインドしようとしましたが、同じ結果が得られます...コンポーネントは完全なページ更新時にレンダリングされますが、 AJAX。

私は$ mountを使いこなしてみましたが、それは効果がありませんでした。ここで

Answer 1

あなたが欲しいものを行うための一つの方法の一例ですが、私はこれがVueのの作成者によって推奨されていないと信じて：

親VUEのインスタンス宣言：

window.vm = new Vue({...}) 

この部分は、可能性がありあなたのAJAX呼び出しの成功の機能に：

var newContent = $(response.new_content_html).wrap('<div></div>'); 

$('#some-container-for-the-dynamic-content').html(newContent); 
var newContentInstance = window.vm.$addChild({ 
    el: '#some-container-for-the-dynamic-content', 
    data: function data() { 
      return { emptyRecordData: {} }; 
    } 
}); 
newContentInstance.$mount(); 
newContentInstance.$data.someOtherData = response.some_other_data; 

Answer 2

私はクロージャを返すために、私のStatus.jsを変更することで、この作業を取得することができました：

module.exports = function() { return new Vue({...}) } 

とAJAXを経由して返される部分のスクリプト部分で私は新しいインスタンスを作成することができるよ：

var MaintenanceStatus = window.MaintenanceStatus(); 

... 

MaintenanceStatus.getStatus(href, data); 

Answer 3

私はあなたがactivateフックhereでご覧になることをお勧めします。ドクから

：データの準備ができているとき

component = { 
    activate: function (done) { 
    var self = this 
    loadDataAsync(function (data) { 
     self.someData = data 
     done() 
    }) 
} 

基本的done()を呼び出します。コンポーネントが挿入されます