First picture, no need to click "Edit"
Second picture when clicking "Edit"
Here, when I click on which edit button, all the tasks in the loop plus the section it is in will be hidden, otherwise the section will be shown, but I want to hide the specific task when I click on the edit button. Can anyone help me?
<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 front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Observation:
isEditingis the culprit in the code. BecauseisEditingis a global variable containing abooleanvalue. So when editing, you update the value of isEditing, which affects all tasks.Solution: You can add isEditing in each object of the Task array instead of defining isEditing globally. This way you can only update the value for the clicked task, rather than for each task.
Your template code will be :
instead of
使用索引代替布尔值来进行
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 }}