Vue Todolist toggle Klasse nur auf einer Liste

Question

Ich versuche, einen Todolist mit vuejs zu erstellen, Hinzufügen und Entfernen Liste funktioniert. Ich kämpfe jetzt mit der Funktion "-done", die eine Klasse umschaltet, um einen Zeilenumbruch an eine Liste anzuhängen.

Das Problem ist, jedes Mal wenn ich die -done Knopf- Stil wechseln zu allen Listen nicht nur eine Liste gelten, hier ist mein Code

.completed{ 
     text-decoration:line-through; 
    } 


    <div id="app"> 
     <input type="text" v-model="newTodo" v-on:keyup.enter="addTodo"> 
     <ul> 
     <li v-if="!todos.length">no items</li> 

     <li v-for="todo in todos"> 
      <span v-bind:class="{'completed':done}"> {{ todo }}</span> 
      <button v-on:click="removeTodo($index)">X</button> 
      <button v-on:click="toggleC">done</button> 
     </li> 
     </ul> 
    </div> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script> 
    <script> 

    new Vue({ 
     el: '#app', 
     data: { 
     newTodo : '', 
     todos : [], 
     done : false 
     }, 
     methods: { 
     addTodo: function(){ 
      var text = this.newTodo.trim() 
      if (text){ 
      this.todos.push(text); 
      this.newTodo = ''; 
      } 
     }, 
     removeTodo: function (index){ 
      this.todos.splice(index, 1) 
     }, 
     toggleC: function(){ 
      this.done = !this.done 
     } 
     } 
    }) 

    </script> 
</body> 
</html> 

Dank!

Answer 1

Derzeit haben Sie nur eine done Variable, die mit der Vue-Instanz verknüpft ist. Somit ist entweder alles getan oder nicht getan. Stattdessen geben Sie jedem Todo seine eigene done Eigenschaft.

Wenn Sie eine todo hinzuzufügen, setzen done auf false, und legen Sie eine text Eigenschaft auf den Textwert:

addTodo: function(){ 
    var text = this.newTodo.trim() 
    if (text){ 
    this.todos.push({text: text, done: false}); 
    this.newTodo = ''; 
    } 
}, 

den HTML Ändern Sie den aktuellen todo in der v-for-Schleife weitergeben müssen:

<li v-for="todo in todos"> 
    <!-- We conditionally add the 'completed' class based on todo.done --> 
    <span v-bind:class="todo.done ? 'completed' : ''"> {{ todo.text }}</span> 
    <button v-on:click="removeTodo($index)">X</button> 

    <!-- Notice we can pass the current todo to toggleC --> 
    <button v-on:click="toggleC(todo)">done</button> 
</li> 

Dann wird in der toggleC Methode, schalten Sie einfach den done Status des aktuellen todo:

toggleC: function(todo){ 
    todo.done = !todo.done 
} 

Hier ist alles zusammen!

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    newTodo : '', 
 
    todos : [], 
 
    }, 
 
    methods: { 
 
    addTodo: function(){ 
 
     var text = this.newTodo.trim() 
 
     if (text){ 
 
     this.todos.push({text: text, done: false}); 
 
     this.newTodo = ''; 
 
     } 
 
    }, 
 
    removeTodo: function (index){ 
 
     this.todos.splice(index, 1) 
 
    }, 
 
    toggleC: function(todo){ 
 
     todo.done = !todo.done 
 
    } 
 
    } 
 
})

.completed{ 
 
    text-decoration:line-through; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script> 
 
<div id="app"> 
 
    <input type="text" v-model="newTodo" v-on:keyup.enter="addTodo"> 
 
    <ul> 
 
    <li v-if="!todos.length">no items</li> 
 

 
    <li v-for="todo in todos"> 
 
     <!-- We conditionally add the 'completed' class based on todo.done --> 
 
     <span v-bind:class="todo.done ? 'completed' : ''"> {{ todo.text }}</span> 
 
     <button v-on:click="removeTodo($index)">X</button> 
 
     
 
     <!-- Notice we can pass the current todo to toggleC --> 
 
     <button v-on:click="toggleC(todo)">done</button> 
 
    </li> 
 
    </ul> 
 
</div>