Vue JS - 如何动态创建表

Question

我希望有一个按钮，单击该按钮会创建一个新表。有可能这样做吗？我在网上搜索过类似的东西，但我找不到任何东西。所有示例都处理单个表并从中添加/删除行。 我遇到的问题是使用附加的方法从 Vue 渲染 html 表格标签。那是我到达路障的地方。另外，我不太确定如何根据表格添加行。我想要完成的事情有可能吗？

更新

我可以插入多个组件，但前提是我将它们硬编码到 html 中。

html

<div class="temp">

    <temp></temp>
    <temp></temp>
    <temp></temp>


    </div>

关于 Vue，我创建了一个模板组件，一切正常。我的目标是在单击按钮时将<temp></temp> 插入到html页面中，以便可以创建另一个表。

Vue

Vue.component('temp', {
    template: '\
<div>\
    <table v-for="(name,i) in rows.slice(0,1)" :key="i">\ 
        <tr>
            <input class="form-control" type="text" v-model="name.exercise" placeholder="Exercise Name"/>
        </tr>
        <tr>
            <th></th>
            <th>Set</th>
            <th>Reps</th>
            <th>Rest</th>
            <th>Comments</th>
         </tr>
         <tr v-for= "(row,k) in rows" :key="k">
             <td scope="row">
                 <i class="fa fa-trash" v-on:click="delRow(k,row)"></i>
             </td >
             <td>
                 <input class="form-control" type="number"v-model="row.set_num" readonly="readonly"/>
             </td>
             <td>\
                 <input class="form-control" type="text" v-model="row.num_of_reps" placeholder="10"/>\
             </td>\
             <td>\
                 <input class="form-control" type="text" v-model="row.rest_time"placeholder="1:30"/>\
             </td>\
             <td>\
                 <input class="form-control" type="text" v-model="row.comments"/>\
             </td>\
        </tr>\
    </table>\
    <button type="button" class="btn btn-info" v-on:click="addRow">\
        <i class="fa fa-plus"></i>\
            Add Row\
        </button>\
</div>',
    data() {
        return {
            set_number: 2,
            rows: [{
                exercise:"exercise",
                set_num: 1,
                num_of_reps: "",
                rest_time: "",
                comments: ""
            }]
        }
    },
    methods: {
        addRow: function () {
            this.rows.push({
                exercise:"exercise",
                set_num: this.set_number++,
                num_of_reps: "",
                rest_time: "",
                comments: ""
            });
        },
        delRow: function (k, row) {
            let row_index = this.rows.indexOf(row);
            if (row_index > 0) {
                this.rows.splice(row_index, 1);
            }
            this.set_number = 1;
            for (let i in this.rows) {
                this.rows[i].set_num = this.set_number;
                this.set_number++;
            };
        }

    }
});

let temp = new Vue({
    el: ".temp",


});

Answer 1

将这些表格添加到 HTML 中的最佳方法是使用创建单独的表格组件。
然后通过在表格组件标签中使用v-for 属性动态添加这些表格组件。

然后您可以创建一个包含表格组件所需属性的数组。然后v-for 可以循环这个数组并为数组中的每个项目创建一个新组件。让我用一个例子来说明这一点：

const ListItem = {
  props: [
    'text'
  ],
  template: "<div> {{ text }} </div>",
}

const vm = new Vue({
  el: '#vue-instance',

  components: {
    listitem: ListItem
  },
  data: {
    elements: []
  },
  methods: {
    addElement: function() {
      this.elements.push("This is a new instance")
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vue-instance">
  <button @click="addElement">
     Add an element
   </button>

  <listitem v-for="(element, index) in elements" :text="element" :key="index">
  </listitem>
</div>