vue.jsコンポーネントを動的にレンダリングする方法は？

Question

vue.jsコンポーネントを動的にレンダリングする方法を知っている人はいますか？例えば、私は小道具定義に基づいて異なるボタンをレンダリングする必要があるテーブルコンポーネントを持っている：

理想的には、私のテンプレートが私の actionオブジェクトの tmpl値で定義されます

Vue.component('my_table', { 
    template: '#my_table', 
    props: { 
     data: Array, 
     columns: Array, 
     actions: Array 
    } 
}); 

：

<tbody> 
    <tr v-for="entry in data"> 
     <td v-for="key in columns"> 
     {{entry[key.field]}} 
     </td> 
     <td v-for="action in actions"> 
     {{ action.tmpl }} 
     </td> 
    </tr> 
</tbody> 

がここにあります私のバイオリン：

https://jsfiddle.net/zfya92dh/43/

誰もが任意のアイデアがありますか？

ありがとうございます！

Answer 1

<component :is="action.tmpl"></component> 

ここはあなたのフィドルですrevisedです。

const button1 = Vue.extend({ 
    template:'<button class="btn btn-primary">View</buttton>' 
}) 

const button2 = Vue.extend({ 
    template:'<button class="btn btn-primary" @click="some_method">Delete</buttton>', 
    methods:{ 
    some_method(){ 
     alert('clicked') 
    } 
    } 
}) 

そして関連データ。

data: { 
    actions: [ 
    { 
     name: 'view', 
     label: 'View Company', 
     method: 'click', 
     tmpl: button1 
    }, 
    { 
     name: 'delete', 
     label: 'Delete Company', 
     method: 'click2', 
     tmpl: button2 
    }, 
    ], 

Answer 2

プレーンテキストの代わりにHTMLを挿入したいだけですか？あなたのHTMLは、Vueのマークアップが含まれている場合

<td v-for="action in actions" v-html="action.tmpl"></td> 

に

<td v-for="action in actions"> 
    {{ action.tmpl }} 
</td> 

を変更しかし、マークアップが尊重されることはありません。それぞれの構成を表す実際のコンポーネントを作成してから、Vueに特定の時刻にどのバージョンを使用するかを指示するには、:isを使用する必要があります。 Vueは文字列ベースのテンプレートを使用しないので、テンプレート文字列を渡す方法はありません。