Vue js生成未定义的新表行数据数组

Question

这里我正尝试使用Vue Js点击“ +”时生成新行

---

但出现错误：tablerows未定义

Vue.component('inp-row', {
  props: ['data'],
  template: `<tr :id="data.row_id" ><td> 1</td><td>2 </td><td>3 </td><td>4 </td><td>5 </td><td>6 </td><td>7 </td></tr>`,

})
var rft = new Vue({
  el: "#prodtable",
  data: {
    tablerows: [{
        id: 0,
        row_id: 'row'
      },
      {
        id: 1,
        row_id: 'row1'
      },
    ],
    counter: 1,

  },

  methods: {
    addRow: function() {
      this.counter++;
      this.tablerows.push({
        id: this.counter,
        row_id: 'row' + this.counter
      });

    }
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<table class="table table-bordered table-striped">
  <thead>
    <th>№</th>
    <th>Category</th>
    <th>Prod. name</th>
    <th>Amount</th>
    <th>Deadline</th>
    <th>Price</th>
    <th>Percentage</th>
  </thead>
  <tbody id="prodtable">
    <inp-row v-for="item in tablerows" v-bind:data="item" v-bind:key="item.id">
    </inp-row>

    <tr @click="addRow()">
      <td colspan="7" class="text-center"><i class="material-icons">add</i></td>
    </tr>
  </tbody>

</table>

这里，我试图使用Vue Js在单击“ +”时生成新行，但出现错误：未定义表行Vue.component（'inp-row'，{道具：['data']，模板： `

Answer 1

您应该使用<tr ... is='inp-row'></tr>而不是<inp-row ...></inp-row>