Vue .splice()가 항상 마지막 항목을 제거하는 이유

Vue .splice()가 항상 마지막 항목을 제거하는 이유

업데이트: 이제 작동 중입니다.제가 뭘 했는지 잘 모르겠어요. 솔직히 아무것도 바꾼 기억이 없지만, 피드백 때문인 것 같아요. 그래서 도와준 모든 분들께 감사드립니다.

배열 내의 객체를 기반으로 테이블 행을 생성하는 루프가 있습니다.제거할 행을 트리거할 때마다 제거할 행은 항상 배열의 마지막 항목입니다.

데이터 - "회의 계획"으로 저장

[
  {
    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는 중복 키에 대해 경고를 발생시키고 기본 키가 아닌 키를 키로 사용했습니다.

---

또 뭐가 있을까요?

당신이 준 코드로 사례를 만들 수 있었습니다만, 정상적으로 동작하고 있는 것 같습니다.

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>

언급URL : https://stackoverflow.com/questions/59868554/why-is-vue-splice-always-removing-the-last-item