第一张图片,无需单击“编辑”
单击“编辑”时的第二张图片
在这里,当我单击哪个编辑按钮时,循环中的所有任务加上它所在的部分将被隐藏,否则部分将显示,但我想在单击编辑按钮时隐藏特定任务。谁能帮我吗?
<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
: