splice ne supprime pas l'élément courant
Nov 19 2020
J'essaie de supprimer l'élément actuel en cliquant, mais lorsque je l'exécute, il ne supprime que le dernier élément.
Je deviens fou, sur un autre composant j'ai fait la même chose et ça a marché ... Je ne sais pas pourquoi ici!
C'est le code, j'utilise différentes bibliothèques ...
<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>
ADDITIONNEL:
c'est le composant parent, la pièce ajoutée avec emit je l'ai mise en évidence avec 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>
Réponses
1 BoussadjraBrahim Nov 19 2020 at 11:41
splice
mute le tableau qui tente de muter le prop, mais en vue, nous ne pouvons pas changer les props du composant enfant, vous devez donc émettre un événement vers le composant parent avec index
comme charge utile:
deleteTime(index) {
console.log(index);
this.$emit("delete-time",index)
},
en parent:
<child @delete-time="onDeleteTime" .../>
...
methods:{
onDeleteTime(index) {
this.hour.splice(index, 1);
},
}