VueコンポーネントとAJAXが読み込んだHTMLコンテンツ

Question

私は基本的に複雑なHTMLマークアップの略語であるAueコンポーネントを持っています。

初期ロード時は、すべて正常に動作します。

私はAJAXを使用してこれらのコンポーネントをページに追加しています。このコンポーネントはAJAXでロードされた後、HTMLにコンパイルされたくないという問題があります。以下：

<component><slot>content</slot></component>

私はVue.compile（見）と機能をレンダリングするが、再レンダリングにこの作業や方法を取得する方法を見つけ出すことはできませんか？コンポーネント。

私はここで何をしなければならないのか誰にも分かりますか？

Answer 1

あなたのデータがビューを駆動させる必要があります。言い換えれば

、あなたは次のHTMLを持っていると仮定してみましょう：

<div id="app"> 
    <component></component> 

    <!-- the following ones are inserted via ajax --> 
    <component></component> 
    <component></component> 
</div> 

とJS：

var app = new Vue({ 
    el: '#app', 
    data: { 
    foo: 'bar', 
    } 
}) 

あなたはおそらく、AJAXリクエストを作り、HTMLに手動<component></component>を挿入しています。それはあなたがVuejsで働くべき方法ではありません。

あなたのデータが表示され運転させ方法は、よく、必要なデータの作成：このコードで

var app = new Vue({ 
    el: '#app', 
    data: { 
    foo: 'bar', 
    components: [ 
     {}, //component related data 
     ... 
    ] 
    }, 

    components: { 
    component, 
    }, 

    ajaxRequest() { 
    //this should push into your components array 
    // example: 
    $.ajax().done(function(data) { 
     this.components.push(data); 
    }) 
    } 
}) 

を、私が保存されますdataに新しい配列（components）を追加しました私の視点でレンダリングしたいコンポーネント私がajax経由でコンポーネントをフェッチするとき、私はこの配列にそれらを追加します。今、私はHTMLを変更した場合：components配列が更新されるたびに

<div id="app"> 
    <component v-for="component in components" data="component"> 
    </component> 
</div> 

、Vueが自動的にビューに追加します。