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

【问题标题】：Vue todolist toggle class only on one listsVue todolist 仅在一个列表上切换类
【发布时间】：2016-06-23 23:34:16
【问题描述】：

我正在尝试使用 vuejs 创建一个 todolist，添加和删除列表正在工作。我现在正在努力使用 -done 功能 - 它会切换一个类以将一个 line-through 附加到一个列表中。

问题是每次我切换 -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>

谢谢！

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

目前，您只有一个 done 变量，它与 Vue 实例相关联。因此，要么一切都完成了，要么没有完成。相反，给每个待办事项它自己的done 属性。

添加待办事项时，将done 设置为false，并将text 属性设置为文本值：

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

修改 HTML 以在 v-for 循环中传递当前待办事项：

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

然后，在toggleC 方法中，简单地切换当前待办事项的done 状态：

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

这里全部放在一起！

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>

【讨论】：