从 Vue Js 动态数组中删除行

Question

我正在尝试在 Vue.js 中创建一个动态表。我能够正确添加行，但是当我尝试删除该行时，每次默认情况下都会删除最后一行。 即使我对索引号进行了硬编码，结果仍然相同。

已经 2 天了，我陷入了这个问题。感谢任何帮助。

我的模板：

<div class="box-body">
        <table id="myTable" class="table">
          <thead>
          <tr class="timesheetTableHeader">
            <th style="width: 50rem">Project</th>
            <th style="width: 40rem">Activity</th>
            <th style="width: 20rem">Charge Back</th>
            <th style="width: 10rem">Hours</th>
          </tr>
          </thead>
          <div class="mt-2"></div>
          <tbody>
          <tr v-for="(row, index) in rows">
            <td>
              <mwselect :options="Project"
                        v-model="row.projectName"
              ></mwselect>
            </td>
            <td>
              <mwselect :options="Activity"
                        v-model="row.activity"
              ></mwselect>
            </td>
            <td>
              <mwselect :options="CostCenter"
                        v-model="row.chargeBackCC"
              ></mwselect>
            </td>
            <td>
              <b-form-input type="number"
                            class="pb-1 pt-1"
                            required
                            v-model="row.hours"
                            name="Hours">
              </b-form-input>
            </td>
            <td>
              <a @click="removeElement(index)" style="cursor: pointer">
                <i class="fa fa-trash-o pt-1" style="color:red; text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;" title="Delete Line"
                ></i></a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

我的脚本：

 <script>
 var period_name = ''
 var start_date = ''
 var end_date = ''
 var counter = 0
 export default {
components: {
  mwselect
},
data() {
  return {
    Project: projects,
    CostCenter: costcenter,
    Activity: activities,
    rows: []
  }  // return end
},
methods: {
  createLine(index) {
    var elem = document.createElement('tr');
    this.rows.push({
      projectName: "",
      activity: "",
      chargeBackCC: "",
      hours: ""
    })
  },
  removeElement: function (index) {
    alert(index)
    this.rows.splice(index, 1);
  }
}
 }
 </script>

Answer 1

除非您将 key 属性放入 for 循环，否则无法保证排序。所以对你的标签的这个改变必须解决这个问题：

<tr v-for="(row, index) in rows" :key="index">

这里是关于属性key的更多信息：https://vuejs.org/v2/guide/list.html#key

Answer 2

感谢 Cmertayak，

添加 :key="index" 有效，它解决了我的问题。