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

Question

編集をクリックしていない最初の画像 編集をクリックしたときの2番目の画像 ここでどの編集ボタンをクリックすると、ループ内のすべてのタスクとそれが含まれるセクションが非表示になります。そうでない場合、セクションは表示されますが、編集ボタンを押したときに特定のタスクを非表示にしたいですをクリックされます。誰か助けてくれませんか？ <script>exportdefault{data(){return{newTaskTitle:"",isEditing:false}},props:{Task:{type:

P粉814160988 · Answer

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

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

テンプレートコードは :

になります。

＃＃＃の代わりに＃＃＃

P粉850680329 · Answer

布尔值の代わりにインデックスを使用して実行します 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)
    }
  }
})