Question

我试图用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>

谢谢！

Answer 1

目前，您只有一个done变量，并且它与Vue实例相关联。因此，要么一切都已完成，要么未完成。相反，给每个todo它自己的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>

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

1 个答案: