Beim Anzeigen aller Elemente in Vue.js mithilfe einer Schleife möchte ich eines der Elemente ausblenden, aber alle Elemente sind ausgeblendet

Question

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>

Answer 1

观察： isEditing 是代码中的罪魁祸首。因为 isEditing 是一个包含 boolean 值的全局变量。因此，在编辑时，您将更新 isEditing 的值，这会影响所有任务。

解决方案：您可以在 Task 数组的每个对象中添加 isEditing，而不是全局定义 isEditing。这样您就可以只更新单击任务的值，而不是为每个任务更新。

您的模板代码将是：

而不是

Answer 2

使用索引代替布尔值来进行 isEditing：

Vue.component('child', {
  template: `
    

    

      

        

          

            
{{ tasks.Task }}
          
        
        

          

            

            

          
        
      
      

        

          

            
          
        
        

          

            

          
        
      
    
  
  `,
  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)
    }
  }
})