Spleiß löscht das aktuelle Element nicht

Question

Ich versuche, das aktuelle Element beim Klicken zu löschen, aber wenn ich es ausführe, wird nur das letzte Element gelöscht.
Ich werde verrückt, bei einer anderen Komponente habe ich das Gleiche getan und es hat funktioniert ... Ich weiß nicht warum hier!
Dies ist der Code, ich benutze verschiedene Bibliotheken ...

 <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>

ZUSÄTZLICH:

Dies ist die übergeordnete Komponente, der Teil, der mit emit hinzugefügt wurde. Ich habe ihn mit EMIT ==> hervorgehoben

<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>

Answer 1

splicemutiert das Array, das versucht, die Requisite zu mutieren, aber in vue können wir Requisiten nicht von der untergeordneten Komponente ändern. Daher sollten Sie ein Ereignis an die übergeordnete Komponente mit der folgenden indexNutzlast ausgeben :

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

im Elternteil:

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

...

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