为什么 Vue .splice() 总是删除最后一项

Question

更新：现在可以使用了。我不确定我做了什么 - 老实说，我不记得有任何改变，但我确信这是由于反馈 - 所以感谢所有提供帮助的人。

我有一个循环，它根据数组中的对象生成表行。每当我触发删除时，无论我要删除哪一行，它始终是数组中被删除的最后一项。

数据 - 存储为“会议计划”

[
  {
    dow:"-T-R---",
    endTime:"11:45:00",
    startTime:"08:45:00"
  },
  {
    dow:"--W----",
    endTime:"12:45:00",
    startTime:"10:45:00"
  },
  {
    dow:"----F--",
    endTime:"15:00:00",
    startTime:"14:00:00"
  }
]

模板

<tr v-for="(meetingPlan,meetingPlanIndex) in meetingPlans" :key="meetingPlanIndex">
    <td>
      -- stuff here doesn't matter --
    </td>
    <td>
        -- stuff here doesn't matter either --
    </td>
    <td class = "pl-0">
        <button v-on:click="removeMeetingPlan(meetingPlanIndex)" type = "button" class = "btn btn-danger btn-sm">
            <i class = "fas fa-times"></i>
        </button>
    </td>
</tr>

Vue 代码

var vm = new Vue({
        el:"#dynamic-planning-column",
        delimiters:["<%","%>"],
        // This is defined server-side.  "meetingPlans" is one of the properties of planData
        data:window.planData,
        methods:{
            addReserveGroup:function(index){
                this.reserveGroups.push({number:'',description:'',cap:''});
            },
            removeReserveGroup:function(index){
                this.reserveGroups.splice(index,1);
            },
            addMeetingPlan:function(index){
                this.meetingPlans.push({id:0,dow:'',startTime:'',endTime:'',timeslot:-1});
            },
            removeMeetingPlan:function(index){
                this.meetingPlans.splice(index,1);
            },
            meetingPlanDowIsOdd:function(MeetingPlan){
                return MeetingPlan.dow.includes('M') || MeetingPlan.dow.includes('W') || MeetingPlan.dow.includes('F');
            }
        }
    });

在我看来，这应该可行。

我尝试过的调试

• 确保模板中的meetingPlanIndex 是唯一值。
• 当我将removeMeetingPlan() 修改为输出index 和输出this.meetingPlans[index] 时，两者都是预期值。
• 当我将 removeMeetingPlan() 修改为硬编码时：this.meetingPlans.splice(0,1) - 它仍然会删除最后一项

我尝试过的解决方案 我读到可以将:key 设为对象而不是数字，因此我将模板修改为：

<tr v-for="(meetingPlan,meetingPlanIndex) in meetingPlans" :key="meetingPlan">

这样做的目的是为了删除正确的行，但 Vue 抛出了关于重复键的警告，并使用非基元作为键。

---

我还能尝试什么？

Answer 1

我可以用你提供的代码做一个例子 - 似乎工作正常。

Vue.component('meeting-plans', {
  data: function() {
    return {
      meetingPlans: [
        {
          dow: "-T-R---",
          endTime: "11:45:00",
          startTime: "08:45:00",
        },
        {
          dow: "--W----",
          endTime: "12:45:00",
          startTime: "10:45:00",
        },
        {
          dow: "----F--",
          endTime: "15:00:00",
          startTime: "14:00:00",
        }
      ],
    }
  },
  methods: {
    removeMeetingPlan: function(index) {
      this.meetingPlans.splice(index, 1);
    },
  },
  template: `
    <table>
      <tr v-for="(meetingPlan,meetingPlanIndex) in meetingPlans" :key="meetingPlanIndex">
        <td class="pl-0">
          <button v-on:click="removeMeetingPlan(meetingPlanIndex)" type="button" class="btn btn-danger btn-sm">
            Remove {{ meetingPlan.dow }}
          </button>
        </td>
      </tr>
    </table>
  `
})

new Vue({
  el: '#demo',
})

<div id="demo">
  <meeting-plans />
</div>

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