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

【问题标题】：Vue js generate new table row data array not definedVue js 生成未定义的新表格行数据数组
【发布时间】：2020-10-01 00:32:30
【问题描述】：

这里我正在尝试使用 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 html-table vue-component row

【解决方案1】：

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

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

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

  },

  methods: {
    addRow: function() {
      console.log(this.tablerows)
      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">
    <tr v-for="item in tablerows" v-bind:data="item" v-bind:key="item.id" is='inp-row'>
    </tr>

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

</table>

【讨论】：