Menunjukkan semua elemen dalam Vue.js menggunakan gelung, saya ingin menyembunyikan salah satu elemen tetapi semua elemen tersembunyi

Question

Gambar pertama, tak perlu klik "Edit"

Gambar kedua apabila mengklik "Edit"

Di sini, apabila saya mengklik butang edit yang mana, semua tugasan dalam gelung ditambah bahagian yang terdapat di dalamnya akan disembunyikan, jika tidak bahagian itu akan ditunjukkan, tetapi saya ingin menyembunyikan tugas tertentu apabila saya mengklik butang edit. Bolehkah sesiapa membantu saya?

<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

Pemerhatian: isEditing 是代码中的罪魁祸首。因为 isEditing 是一个包含 boolean Pembolehubah global untuk nilai. Jadi apabila mengedit, anda mengemas kini nilai isEditing, yang mempengaruhi semua tugas.

Penyelesaian: Anda boleh menambah isEditing dalam setiap objek tatasusunan Tugas dan bukannya mentakrifkan isEditing secara global. Dengan cara ini anda hanya boleh mengemas kini nilai tugas yang diklik dan bukannya mengemas kini untuk setiap tugas.

Kod templat anda ialah :

bukannya

Answer 2

Gunakan indeks dan bukannya boolean untuk melakukan 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)
    }
  }
})

sssccc