当删除` `从lis列表中，我把样式错误地应用到下一个` `。如何解决这个问题？

Question

我正在Vuejs做一个待办事项列表。我几乎完成了这种行为。但是，当我从列表中删除<li>时，我将类.completed放入下一个<li>。任何人都可以帮我修复这个错误并解释为什么会发生这种情况？

这是一个样本JSfiddle：https://jsfiddle.net/mercenariomode/34q6gxt1/

提前致谢！

Answer 1

那是因为你的点击事件传播到了span的父元素，即因此活动被切换。所以为了防止这种情况，你需要通过使用stop来阻止你的事件进一步传播。阅读details

<span v-on:click.stop="deleteTodo(index)">{{ todo.delete }}</span>

https://jsfiddle.net/RiddhiParekh/k3b0umL1/

Answer 2

您也可以尝试使用我认为看起来更好的内容，即分隔交叉符号和任务文本的范围。

<div id="app">
    <h1>{{ message }}</h1>
    <form v-on:submit.prevent="addNewTodo">
      <input id="input-value" type="text" v-model="task">
      <button type="submit">Add todo</button>
    </form>

    <ul>
      <li v-for="(todo, index) in todos">
      <span :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
      {{ todo.task }}</span> <span v-on:click="deleteTodo(index)">{{ todo.delete }}</span>
      </li>
    </ul>
  </div>