splice 不会删除当前元素
[英] splice does not delete the current element
本文介绍了splice 不会删除当前元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在点击时删除当前项目，但是当我运行它时它只删除最后一个项目.
我快疯了，在另一个组件上我做了同样的事情并且它有效......我不知道为什么！
这是代码，我正在使用各种库...
<模板><div class="hours-container"><div类=小时"v-for=(time, index) in hour":key=索引"><时间选择器:default-value="moment('08:00', 'HH:mm')";格式=HH:mm":分步=15":allowClear="allowClear";/><跨度>到</span><时间选择器:class="time.delete ?'' : 'mr-3'":default-value="moment('00:00', 'HH:mm')";格式=HH:mm":分步=15":allowClear="allowClear";/><b-图标v-if=time.delete"图标=x"；宽度=20"高度=20"类=删除时间"@click="deleteTime(index)";></b-图标>
</模板><脚本>从时刻"导入时刻；导出默认{道具: {小时:数组，},数据() {返回 {允许清除:假，};},方法: {moment,//per impostare l'orario di default删除时间(索引){控制台日志(索引)；//per eliminare uno slot di orarithis.hour.splice(index, 1);},},};
附加:
这是父组件，添加了emit的部分我用EMIT ==>高亮了它
<div><h2 class="options-title mx-auto">选项是什么?</h2><b-row class=d-flex ml-2"><功能日历:configs="calendarConfigs";@dayClicked="dayClicked";ref=日历"></功能日历><div class="hours-selection-container">v-on:delete-time="onDeleteTime";></时间选择器>
<b-button class="p-0";变体=成功"@click="addTime(day)">+ 添加更多次数</b-按钮>
<div class="user-form-timezone p-4 mx-auto">所有时间显示在欧洲/罗马.
</b-row>
</模板><脚本>从./Timepicker.vue"导入时间选择器；导出默认{成分: {时间选择器，},数据() {返回 {日期:新日期()，日历数据:{}，daySelected: [],//array che conterrà l'oggetto pushato日历配置:{disabledDates: [beforeToday"],//disabilita le date precedenti alla data odierna//isMultipleDatePicker: true,//abilita la selezione multipladatePicker: true,//abilita la selezione singola//dateFormat: "dd/mm",isMarked:假，},};},方法: {天点击(项目){//di base viene passato il giorno selezionato e viene convertito in string让 daySelectedObj = {//creo l'oggetto standard che conterrà la data selezionata e un orario di default选择日:item.date，时间: [{默认时间开始:08:00"，defaultTimeEnd: "00:00",},],//inserisco già uno slot di base per mostrarlo其他:项目，//mi porto dentro anche tutto l'oggetto passato};//mi prendo il giorno corrente per i controlli今天 var = new Date();var dd = String(today.getDate()).padStart(2, 0");var mm = String(today.getMonth() + 1).padStart(2, 0");//一月是0！var yyyy = today.getFullYear();今天 = dd + "/";+ 毫米 + /"+ yyy;如果 (!item.isMarked && item.date >= 今天) {//se il giorno passato non ha la proprietà isMarked e se è Superiore o uguale ad oggithis.daySelected.push(daySelectedObj);//inserisco dentro l'array l'oggetto creatoitem.isMarked = true;//imposto la proprietà 标记为 true per evidenziare sul calendario il giorno cliccato}},发射==>onDeleteTime(索引){控制台日志(索引)；this.hour.splice(index, 1);},添加时间(数组){//aggiungo uno o più slot di orario all'interno del giorno selezionato//creo l'oggetto standard con l'orario di defaultconst defaultHour = {默认时间开始: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(数组", 数组);},},};
解决方案
splice 改变试图改变 props 的数组，但在 vue 中我们不能改变子组件的 props，所以你应该发出以 index 作为负载的父组件的事件:
deleteTime(index) {控制台日志(索引)；this.$emit("delete-time",index)},
在父级中:
...方法:{onDeleteTime(索引){this.hour.splice(index, 1);},}
I am trying to delete the current item on click, but when i run it it deletes only the last item.
I'm going crazy, on another component I did the same thing and it worked...I don't know why here!
This is the code, I am using various libraries...
<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>
ADDITIONAL:
this is the parent component, the part added with emit I highlighted it with 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>
解决方案
splice mutates the array which tries to mutate the prop, but in vue we cannot change props from child component, so you should emit an event to the parent component with the index as payload :
deleteTime(index) {
console.log(index);
this.$emit("delete-time",index)
},
in parent :
<child @delete-time="onDeleteTime" .../>
...
methods:{
onDeleteTime(index) {
this.hour.splice(index, 1);
},
}
这篇关于splice 不会删除当前元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
