Erstes Bild, Sie müssen nicht auf „Bearbeiten“ klicken
Zweites Bild, wenn Sie auf „Bearbeiten“ klicken
Wenn ich hier auf die Schaltfläche „Bearbeiten“ klicke, werden alle Aufgaben in der Schleife sowie der Abschnitt, in dem sie sich befindet, ausgeblendet. Andernfalls wird der Abschnitt angezeigt, aber ich möchte die spezifische Aufgabe ausblenden, wenn ich auf die Schaltfläche „Bearbeiten“ klicke. Kann mir jemand helfen?
<script>
export default {
data(){
return{
newTaskTitle: "",
isEditing : false
}
},
props:{
Task:{
type:Array,
required: true
},
},
methods:{
removeTask: function(idx){
this.Index = idx;
this.$emit('remove',this.Index);
},
EditTaskI(tsk){
this.task = tsk;
console.log(this.task);
this.isEditing = this.isEditing == true ? false : true;
this.newTaskTitle = this.task;
},
TaskUpdated(indx){
this.Index = indx
this.$emit('update',this.Index,this.newTaskTitle);
this.isEditing = this.isEditing == true ? false : true;
},
taskContentChange(e){
this.newTaskTitle = e.target.value;
}
}
}
</script>
<template>
<section v-if="Task.length > 0" class="taskMainSection">
<section v-for="(tasks,index) in Task" :key="index" class="sectionTask" >
<section class="TaskBox" v-if="!isEditing">
<div class="TaskTitleList" >
<div class="TaskSection">
<p class="listTask">{{ tasks.Task }}</p>
</div>
</div>
<div class="OptionSectionMain">
<div class="OptionSection">
<p class="removeTask fa fa-close" @click="removeTask(index)"></p>
<p class="editTask fa fa-edit" @click="EditTaskI(tasks.Task,index)"></p>
</div>
</div>
</section>
<section class="TaskBoxEdit" v-else>
<div class="TaskTitleList" >
<div class="TaskSection">
<input type="text" class="form-control" :value="newTaskTitle" @change="taskContentChange">
</div>
</div>
<div class="OptionSectionMain">
<div class="OptionSection">
<p class="removeTask fa fa-check" @click="TaskUpdated(index)"></p>
</div>
</div>
</section>
</section>
</section>
</template>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
观察：
isEditing是代码中的罪魁祸首。因为isEditing是一个包含boolean值的全局变量。因此，在编辑时，您将更新 isEditing 的值，这会影响所有任务。解决方案：您可以在 Task 数组的每个对象中添加 isEditing，而不是全局定义 isEditing。这样您就可以只更新单击任务的值，而不是为每个任务更新。
您的模板代码将是：
而不是
使用索引代替布尔值来进行
isEditing：Vue.component('child', { template: `
`,
data(){
return{
newTaskTitle: "",
isEditing : null
}
},
props:{
Task:{
type:Array,
required: true
},
},
methods:{
removeTask(idx){
console.log(idx)
this.$emit('remove', idx);
},
EditTaskI(tsk, i){
this.task = tsk;
this.isEditing = i;
this.newTaskTitle = this.task;
},
TaskUpdated(indx){
this.Index = indx
this.$emit('update',this.Index,this.newTaskTitle);
this.isEditing = null;
},
taskContentChange(e){
this.newTaskTitle = e.target.value;
}
}
})
new Vue({
el: "#demo",
data(){
return{
tasks: [{Task: 'aaa'}, {Task: 'bbb'}, {Task: 'ccc'}],
}
},
methods: {
updateTasks(i, name) {
this.tasks[i].Task = name
},
removeTask(i) {
this.tasks.splice(i, 1)
}
}
}){{ tasks.Task }}