When removing a “ from a list of lis, I got styles wrongly applied to the next “. How to fix this?

I am doing a todo list in Vuejs. I am almost done with the behavior. However, when I removed a <li> from the list, I got the class .completed into the next <li>. Anybody can help me to fix this bug & explain why is happening?

This is a sample JSfiddle: https://jsfiddle.net/mercenariomode/34q6gxt1/

Thanks in advance!

Answer

Thats because your click event is propogating to parent element of span i.e li and hence active is toggled.So to prevent this you need to stop your event from propogating further by using stop. Read for details

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

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