Vuejs2のjsonから動的にコンポーネントを作成するには

Question

セルのコンポーネントを動的にテーブルに設定しようとしています。私は、パラメータとして「サンプル」（コンポーネント名）を渡すと、それが動作

<!--table data--> 
    <tr v-for='(row,rowIndex) in tableData.rows'> 
     <td><input type='checkbox'></td> 

     <td v-for="(element,colIndex) in row"> 

     <component is='Sample' v-bind='element.v' ></component> 
     </td > 

    </tr> 

が、そのないとき：そのように見えます

tableData: { 
    headers: ['1', '3', '2', '4'], 
    rows: [ 
     [{h: '1', t: 'Sample', v: {name: 'logan'}}, 
     {h: '2', t: 'Sample', v: {name: 'dgd'}}, 
     {h: '3', t: 'Sample', v: {name: 'logasdn'}}, 
     {h: '4', t: 'Sample', v: {name: 'loezgan'}}] 
    ], 
    showHeaders: ['1', '2', '3'] 
    } 

のhtmlセクション：

入力構造は次のように見えます私は 'Sample'を 'element.t'または{{element.t}}と置き換えて私は理解しません。

誰もがなぜ動作しないのか、それを行う方法を知っていますか？

Answer 1

あなたはv-bind:isや速記:is経由isにバインドする必要があります。

<component :is='element.t' v-bind='element.v'></component>