javascript - 从 lis 列表中删除 `` 时，我将样式错误地应用于下一个 `` 。如何解决这个问题？

Question

我正在 Vuejs 中做一个待办事项列表。我几乎已经完成了这种行为。但是，当我删除 <li> 时从列表中，我得到了类(class) .completed进入下一个<li> 。为什么会发生这种情况？

这是一个 JS Fiddle 示例:https://jsfiddle.net/mercenariomode/34q6gxt1/

Answer 1

那是因为您的点击事件正在传播到 span 的父元素，即 li ，因此事件被切换。因此，为了防止这种情况，您需要使用 stop 来阻止事件进一步传播。阅读 details

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

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