Vue.js 2.0 this。$ compile

Question

コンポーネントメソッド内でHTML文字列をテンプレートにコンパイルするにはどうすればよいですか？ これはVueの2にこれを行うことができますどのようにこのjsfiddle

new Vue({ 
    el: '#app', 
    data: { 
     sampleElement: '<button v-on="click: test()">Test</button>' 

    }, 
    methods:{ 
     addNewElement: function(){ 

      var element = $('#app').append(this.sampleElement); 
      /* compile the new content so that vue can read it */ 
      this.$compile(element.get(0)); 
     }, 
     test: function(){ 
      alert('Test'); 
     } 
    } 
}); 

のようにVueの1にできましたか？

Answer 1

Vue 2はデータ駆動型なので、手動でDOMに何も影響を与えないようにする必要はありません。その代わりに、要素をビューモデルの基になるデータにバインドする必要があります。そのことを念頭において、あなたの例を書き直す必要があります。まず、あなたの要素を作ることから始めcomponent：

Vue.component('my-button', { 
    template: '<button v-on:click="test()">{{text}}</button>', 
    props: ['text'], 
    methods: { 
    test() { 
     alert('Test'); 
    } 
    } 
}); 

次に、あなたのメインのビューモデルを作成し、V-のため使用して、ボタンコンポーネントを追加することができます。

マークアップ：

<button v-on:click="addNewElement()">Add Element</button> 
    <my-button v-for="button in buttons" :text="button"></my-button> 

ビューモデル：

new Vue({ 
    el: '#app', 
    methods: { 
    addNewElement: function() { 
     this.buttons.push('Test'); 
    } 
    }, 
    data: { 
    buttons: [] 
    } 
}); 

この例では、ボタンを配列thテンプレートに手動で追加するのではなく、ページに表示されます。ここで

はJSFiddleです：http://jsfiddle.net/10q9je5a/

あなたはより一般的な何かをしたい場合は、あなたは、単にdifferent componentsの配列を作成し、Vueのレンダリングするためにどのコンポーネント知らせるために:isを使用することができます。

マークアップ：

<div id="app"> 
    <button v-on:click="addNewElement()">Add Element</button> 
    <div :is="element.component" v-for="element in elements" v-bind="element.props"></div> 
</div> 

ビューモデル：

new Vue({ 
    el: '#app', 
    methods: { 
    addNewElement: function() { 
     this.elements.push({component: 'my-button', props: {text: 'Test'}}); 
    } 
    }, 
    data: { 
    elements: [] 
    } 
}); 

ここでは、そのためにJSFiddleです：is`：http://jsfiddle.net/cxo5eto0/