javascript - splice 不删除当前元素

Question

我试图在点击时删除当前项目，但是当我运行它时它只删除最后一个项目。
我快疯了，在另一个组件上我做了同样的事情并且它起作用了......我不知道为什么在这里！
这是代码，我正在使用各种库......

 <template>
   <div class="hours-container">
     <div class="hours" v-for="(time, index) in hour" :key="index">
       <a-time-picker
         :default-value="moment('08:00', 'HH:mm')"
         format="HH:mm"
         :minute-step="15"
         :allowClear="allowClear"
       />
       <span> to </span>
       <a-time-picker
         :class="time.delete ? '' : 'mr-3'"
         :default-value="moment('00:00', 'HH:mm')"
         format="HH:mm"
         :minute-step="15"
         :allowClear="allowClear"
       />
       <b-icon
         v-if="time.delete"
         icon="x"
         width="20"
         height="20"
         class="delete-time"
         @click="deleteTime(index)"
       ></b-icon>
     </div>
   </div>
 </template>

 <script>
 import moment from "moment";
 export default {
   props: {
     hour: Array,
   },
   data() {
     return {
       allowClear: false, 
     };
   },
   methods: {
     moment, //per impostare l'orario di default
     deleteTime(index) {
       console.log(index);
       //per eliminare uno slot di orari
       this.hour.splice(index, 1);
     },
   },
 };
 </script>

额外的：

这是父组件，用 emit 添加的部分我用 EMIT ==> 突出显示它

<template>
  <div>
    <h2 class="options-title mx-auto">What's the options?</h2>
    <b-row class="d-flex ml-2">
      <functional-calendar
        :configs="calendarConfigs"
        @dayClicked="dayClicked"
        ref="Calendar"
      ></functional-calendar>
      <div class="hours-selection-container">
        <div
          class="time-choise d-flex ml-3 mt-2"
          v-for="(day, index) in daySelected"
          :key="index"
        >
          <b-icon
            class="delete-date"
            icon="x-circle"
            variant="danger"
            width="40"
            height="35"
            @click="deleteDate(index, day)"
          ></b-icon>
          <div class="date-times-container d-flex">
            <span class="date-selected">{{ day.selectDay.slice(0, 5) }}</span>
            <Timepicker
              :hour="day.time"
  EMIT==>     v-on:delete-time="onDeleteTime"
            ></Timepicker>
          </div>

          <b-button class="p-0" variant="success" @click="addTime(day)">
            + Add more times
          </b-button>
        </div>
        <div class="user-form-timezone p-4 mx-auto">
          All time displayed in Europe/Rome.
        </div>
      </div>
    </b-row>
  </div>
</template>

<script>
import Timepicker from "./Timepicker.vue";
export default {
  components: {
    Timepicker,
  },
  data() {
    return {
      date: new Date(),
      calendarData: {},
      daySelected: [], //array che conterrà l'oggetto pushato
      calendarConfigs: {
        disabledDates: ["beforeToday"], //disabilita le date precedenti alla data odierna
        //isMultipleDatePicker: true, //abilita la selezione multipla
        datePicker: true, //abilita la selezione singola
        //dateFormat: "dd/mm",
        isMarked: false,
      },
    };
  },
  methods: {
    dayClicked(item) {
      //di base viene passato il giorno selezionato e viene convertito in string
      let daySelectedObj = {
        //creo l'oggetto standard che conterrà la data selezionata e un orario di default
        selectDay: item.date,
        time: [
          {
            defaulTimeStart: "08:00",
            defaultTimeEnd: "00:00",
          },
        ], //inserisco già uno slot di base per mostrarlo
        other: item, //mi porto dentro anche tutto l'oggetto passato
      };
      //mi prendo il giorno corrente per i controlli
      var today = new Date();
      var dd = String(today.getDate()).padStart(2, "0");
      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
      var yyyy = today.getFullYear();
      today = dd + "/" + mm + "/" + yyyy;

      if (!item.isMarked && item.date >= today) {
        //se il giorno passato non ha la proprietà isMarked e se è superiore o uguale ad oggi
        this.daySelected.push(daySelectedObj); //inserisco dentro l'array l'oggetto creato
        item.isMarked = true; //imposto la proprietà marked true per evidenziare sul calendario il giorno cliccato
      }
    },
 EMIT==>     onDeleteTime(index) {
      console.log(index);
      this.hour.splice(index, 1);
    },
    addTime(array) {
      //aggiungo uno o più slot di orario all'interno del giorno selezionato
      //creo l'oggetto standard con l'orario di default
      const defaultHour = {
        defaulTimeStart: "08:00",
        defaultTimeEnd: "00:00",
        delete: true, //mi serve per abilitare l'icona x solo sugli orari aggiunti e non sul primo
      };
      array.time.push(defaultHour); //inserisco all'interno dell'array time (che è all'interno dell'array daySelected) lo slot dell'orario scelto
      //console.log("ARRAY", array);
    },
  },
};
</script>

标签： javascriptarraysvue.jssplicev-for

Answer 1

splice改变试图改变 props 的数组，但是在 vue 中我们不能改变子组件的 props，所以你应该使用indexas payload 向父组件发出一个事件：

deleteTime(index) {
       console.log(index);
       this.$emit("delete-time",index)
     },

在父母中：

   <child @delete-time="onDeleteTime" .../>

...

methods:{
 onDeleteTime(index) {
      
       this.hour.splice(index, 1);
     },
}