使用循環在Vue.js中顯示所有元素，我想隱藏其中一個元素，但所有元素都被隱藏了

Question

第一張圖片，無需按一下「編輯」

點擊「編輯」時的第二張圖片

在這裡，當我單擊哪個編輯按鈕時，循環中的所有任務加上它所在的部分將被隱藏，否則部分將顯示，但我想在單擊編輯按鈕時隱藏特定任務。誰能幫我嗎？

<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('孩子', {
  模板：`
    

    

      

        

          

            
{{ 任務.任務 }}
          
        
        

          

            

            

          
        
      
      

        

          

            
          
        
        

          

            

          
        
      
    
  
  `,
  數據（）{
    返回{
      新任務標題：“”，
      正在編輯：空
    }
  },
  道具：{
    任務：{
      類型：數組，
      必填：真實
    },
  },
  方法：{
    刪除任務（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)
    }
  }
})

SSCC