v-forのすべての値へのアクセスを停止する

Question

v-forでレンダリングされた特定のtodoを編集しようとしています。しかし、私のtodoはすべて同時に編集モードに入ります。私はVueが初めてです。

<template> 
<div> 
    <h1>All Todos</h1> 
    <div v-for="todo in todos"> 
     <h4 v-if="editTodo===false">{{ todo.content }} <span class="label label-primary" @click="editTodoFun(todo)">Edit</span></h4> 
     <div v-if="editTodo===true"> 
      <input type="text" v-model="editTodoVal" > 
     </div> 
    </div> 
</div> 
</template> 

---

<script> 
    export default { 
    data() { 
     return { 
      editTodo: false 
     } 
     }, 
    computed: { 
    todos() { 
     return this.$store.getters.getAllTodoDetails; 
    } 
    }, 
    methods: { 
     editTodoFun(x) { 
      this.editTodo = true; 
     } 
    } 
    } 
</script> 

---

私は編集をクリックすると、editTodoは、すべての項目で真になります。どうもありがとうございました。

Answer 1

これを行う最も簡単な方法は、editingプロパティをToDoオブジェクトに追加することです。

次に、あなたの代わりにあなたのグローバルeditTodoの

v-if="todo.editing" 

を使用することができます。

<div v-for="todo in todos"> 
    <h4 v-if="!todo.editing">{{ todo.content }} <span class="label label-primary" @click="todo.editing = true">Edit</span></h4> 
    <div v-if="todo.editing"> 
     <input type="text" v-model="todo.content"> 
     <span class="label label-success" @click="todo.editing = false">Edit</span> 
    </div> 
</div> 

以下は、例として少し修正したものです。

new Vue({ 
 
    el: "#app", 
 
    data() { 
 
    return { 
 
     todos: [{ 
 
      content: "Learn Vue", 
 
      editing: false 
 
     }, 
 
     { 
 
      content: "Learn JavaScript", 
 
      editing: false 
 
     } 
 
     ] 
 
    } 
 
    }, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app"> 
 
    <h1>All Todos</h1> 
 
    <div v-for="todo in todos"> 
 
    <h4 v-if="!todo.editing">{{ todo.content }} <button class="label label-primary" @click="todo.editing = true">Edit</button></h4> 
 
    <div v-if="todo.editing"> 
 
     <input type="text" v-model="todo.content"> 
 
     <button class="label label-success" @click="todo.editing = false">Save</button> 
 
    </div> 
 
    </div> 
 
</div>