Почему Vue .splice () всегда удаляет последний элемент

Question

Обновление: Сейчас работает. Я не уверен, что я сделал - честно говоря, я не помню, чтобы что-то менять, но я уверен, что это было из-за обратной связи - так что спасибо всем, кто помог.

У меня есть все oop, что генерирует строки таблицы на основе объектов в массиве. Всякий раз, когда я запускаю удаление, независимо от строки, которую я хочу удалить, это всегда последний элемент в массиве, который удаляется.

Данные - сохраняются как "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"
  }
]

Шаблон

<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() на output index и output 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>