Affichage de tous les éléments dans Vue.js à l'aide d'une boucle, je souhaite masquer l'un des éléments mais tous les éléments sont masqués

Question

Première photo, pas besoin de cliquer sur "Modifier"

Deuxième photo en cliquant sur "Modifier"

Ici, lorsque je clique sur quel bouton d'édition, toutes les tâches de la boucle ainsi que la section dans laquelle elle se trouve seront masquées, sinon la section sera affichée, mais je souhaite masquer la tâche spécifique lorsque je clique sur le bouton d'édition. Quelqu'un peut-il m'aider?

<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

Observation : isEditing 是代码中的罪魁祸首。因为 isEditing 是一个包含 boolean Variable globale pour la valeur. Ainsi, lors de l'édition, vous mettez à jour la valeur de isEditing, ce qui affecte toutes les tâches.

Solution : Vous pouvez ajouter isEditing dans chaque objet du tableau Task au lieu de définir isEditing globalement. De cette façon, vous pouvez simplement mettre à jour la valeur de la tâche cliquée au lieu de mettre à jour pour chaque tâche.

Le code de votre modèle sera  :

au lieu de

Answer 2

Utilisez des index au lieu de booléens pour faire 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