ループを使用して Vue.js のすべての要素を表示すると、要素の 1 つを非表示にしたいのですが、すべての要素が非表示になります

Question

最初の画像、「編集」をクリックする必要はありません

「編集」をクリックしたときの 2 番目の画像

ここで、どの編集ボタンをクリックすると、ループ内のすべてのタスクとそのセクションが非表示になります。それ以外の場合はセクションが表示されますが、編集ボタンをクリックしたときに特定のタスクを非表示にしたいのです。ボタン。誰か助けてくれませんか？

リーリー リーリー

Answer 1

観察: isEditing がコードの原因です。 isEditing は boolean 値を含むグローバル変数であるためです。したがって、編集時には isEditing の値を更新し、これはすべてのタスクに影響します。

解決策: isEditing をグローバルに定義する代わりに、Task 配列の各オブジェクトに isEditing を追加できます。この方法では、タスクごとではなく、クリックしたタスクの値のみを更新できます。

テンプレート コードは :

になります。

＃＃＃ の代わりに ＃＃＃

Answer 2

布尔值の代わりにインデックスを使用して実行します isEditing:

Vue.component('子', {
  テンプレート: `
    

    

      

        

          

            
{{ タスク.タスク }}
          
        
        

          

            

            

          
        
      
      

        

          

            
          
        
        

          

            

          
        
      
    
  
  `、
  データ（）{
    戻る{
      新しいタスクタイトル: "",
      isEditing : null
    }
  }、
  小道具:{
    タスク：{
      タイプ:配列、
      必須: true
    }、
  }、
  メソッド:{
    削除タスク(idx){
    コンソール.ログ(idx)
      this.$emit('削除', idx);
    }、
    EditTaskI(tsk, i){
      this.task = tsk;
      this.isEditing = i;
      this.newTaskTitle = this.task;
    }、
    TaskUpdated(インデックス){
      this.Index = インデックス
      this.$emit('update',this.Index,this.newTaskTitle);
      this.isEditing = null;
    }、
    taskContentChange(e){
      this.newTaskTitle = e.target.value;
    }
  }
})
新しい Vue({
  el: "#デモ",
  データ（）{
    戻る{
      タスク: [{タスク: 'aaa'}、{タスク: 'bbb'}、{タスク: 'ccc'}]、
    }
  }、
  メソッド: {
    updateTasks(i, 名前) {
      this.tasks[i].Task = 名前
    }、
    削除タスク(i) {
      this.tasks.splice(i, 1)
    }
  }
})