При удалении `<li>` из списка lis я неправильно применил стили к следующему `<li>`.Как это исправить?

Question

Я делаю список задач в Vuejs.Я почти закончил с поведением.Однако, когда я удалил <li> из списка, я получил класс .completed в следующем <li>.Кто-нибудь может помочь мне исправить эту ошибку и объяснить, почему это происходит?

Это пример JSfiddle: https://jsfiddle.net/mercenariomode/34q6gxt1/

Заранее спасибо!

Answer 1

Вы также можете попробовать это, что, я думаю, выглядело бы лучше, т. Е. Разделить интервал между символом креста и текстом задачи.

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

Answer 2

Это потому, что ваше событие click распространяется на родительский элемент span, т.е. li и, следовательно, active, переключено. Чтобы предотвратить это, вам нужно остановить дальнейшее распространение вашего события, используя stop.Читать Подробнее

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

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