第一張圖片，無需按一下「編輯」
點擊「編輯」時的第二張圖片
在這裡，當我單擊哪個編輯按鈕時，循環中的所有任務加上它所在的部分將被隱藏，否則部分將顯示，但我想在單擊編輯按鈕時隱藏特定任務。誰能幫我嗎？
<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>
觀察：
isEditing是程式碼中的罪魁禍首。因為isEditing是一個包含boolean值的全域變數。因此，在編輯時，您將更新 isEditing 的值，這會影響所有任務。解決方案：您可以在 Task 陣列的每個物件中新增 isEditing，而不是全域定義 isEditing。這樣您就可以只更新單擊任務的值，而不是為每個任務更新。
您的模板程式碼將是：
#而不是
#使用索引取代布林值來進行
isEditing：Vue.component('孩子', { 模板：`
`,
數據（）{
返回{
新任務標題：“”，
正在編輯：空
}
},
道具：{
任務：{
類型：數組，
必填：真實
},
},
方法：{
刪除任務（idx）{
控制台.log(idx)
this.$emit('刪除', idx);
},
編輯任務I(tsk, i){
this.task = tsk;
this.isEditing = i;
this.newTaskTitle = this.task;
},
任務更新（索引）{
this.Index = indx
this.$emit('update',this.Index,this.newTaskTitle);
this.isEditing = null;
},
任務內容更改（e）{
this.newTaskTitle = e.target.value;
}
}
})
新的Vue（{
埃爾：“#demo”，
數據（）{
返回{
任務：[{任務：'aaa'}，{任務：'bbb'}，{任務：'ccc'}]，
}
},
方法： {
更新任務（我，名稱）{
this.tasks[i].Task = 名稱
},
刪除任務(i) {
this.tasks.splice(i, 1)
}
}
}){{ 任務.任務 }}