Javascript Vue todolist切换类仅在一个列表上

我正在尝试使用vuejs创建todolist，添加和删除列表都可以。我现在正在努力使用-done函数，它将切换一个类，以便在列表中添加一行

问题是每次我切换-done按钮时，样式将应用于所有列表，而不仅仅是一个列表，这是我的代码

    .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>

。已完成{
文字装饰：线条贯通；
}

无项目

{{todo}}
X
完成


新Vue({
el:“#应用程序”，
数据：{
纽托德：“，
待办事项：[]，
完成：错误
},
方法：{
addTodo:function（）{
var text=this.newTodo.trim（）
如果（文本）{
this.todos.push（文本）；
this.newTodo=''；
}
},
removeTodo:函数（索引）{
this.todos.splice（索引，1）
},
toggleC:function（）{
this.done=！this.done
}
}
})

---

谢谢

当前，您只有一个

done

变量，它与Vue实例关联。因此，要么一切都完成了，要么没有完成。相反，为每个todo指定它自己的

done

属性

添加todo时，将

done

设置为false，并将

text

属性设置为文本值：

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

修改HTML以在v-for循环中传递当前todo：

<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>

在这里，一切都放在一起了

newvue({
el:“#应用程序”，
数据：{
纽托德：“，
待办事项：[]，
},
方法：{
addTodo:function（）{
var text=this.newTodo.trim（）
如果（文本）{
this.todos.push（{text:text，done:false}）；
this.newTodo=''；
}
},
removeTodo:函数（索引）{
this.todos.splice（索引，1）
},
切换：功能（todo）{
todo.done=！todo.done
}
}
})

。已完成{
文字装饰：线条贯通；
}

无项目

{{todo.text}}
X
完成

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