如何動態渲染 vue.js 組件？

Question

有人知道動態渲染 vue.js 組件的方法嗎？ 例如，我有一個表格組件，它應該根據道具定義呈現不同的按鈕：

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

理想情況下，我的模板將在我的action對象的tmpl值中定義：

<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>

這是您修改過的小提琴。

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 而不是純文本？ 改變

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

至

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

但是，如果您的 HTML 包含 Vue 標記，則不會尊重該標記。 您將需要創建實際的組件來表示您的每個配置，然后使用:is告訴 Vue 在給定時間使用哪個組件。 Vue 不使用基於字符串的模板，因此無法使傳遞模板字符串起作用。