Как переключить событие onclick класса только на элемент <li>в списке lis, используя Vuejs?

Question

Я изучаю немного Vuejs, чтобы улучшить мою игру в экосистеме JS.Я строю список дел.Мне удалось составить список Лис.Я также смог проверить их, используя событие onlick.Однако, когда я нажал на li, он применил класс ко всем из них.

Я попытался перебрать список, но не думаю, что делаю это правильно.Если кто-нибудь может указать мне правильное направление, пожалуйста.

HTML-код:

<div id="app">
  <h1>{{ message }}</h1>
  <ul>
    <li v-bind:class="{ completed: isActive }" v-on:click="checked" v-for="todo in todos">
      {{ todo.task }}
    </li>
  </ul>
</div>

JS-код:

var app = new Vue({
  el: '#app',
  data: {
    message: 'List of things to do today',
    todos: [
      { task: 'Have breakfast' },
      { task: 'Go to the gym' },
      { task: 'Study Vuejs' }
    ],
    isActive: false
  },
  methods: {
    checked: function(todos){
      this.isActive = !this.isActive
    }
  }
});

Мне нужно найти способ переключениякласс только в том случае, если я нажму ...

Вот пример JSfiddle: https://jsfiddle.net/mercenariomode/pL3g6q14/2/

Answer 1

Если вы хотите, чтобы клик изменил isActive из todo, то вы должны сохранить его (и прочитать) там:

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

data: {
  message: 'List of things to do today',
  todos: [
    { task: 'Have breakfast'},
    { task: 'Go to the gym'},
    { task: 'Study Vuejs'}
  ],
}

Вам не нужно isActiveв исходном состоянии todo, которое охватывается с помощью $set.

Рабочая скрипка: https://jsfiddle.net/iStyx/508bn4se/

---

Объяснение использования $set:

Изначально объект todo не имеет свойства isActive, поэтому добавление или изменение его впоследствии не будет реактивным.Конечно, вы можете добавить isActive: false ко всем вашим todo объектам, но это довольно грязно и небрежно.Другой способ - использовать метод Vue.$set (может вызываться из экземпляров Vue с помощью this.$set), который следует использовать для добавления новых свойств к реактивному объекту (он также делает их реактивными).Выдержка из документа:

Добавляет свойство к реактивному объекту, гарантируя, что новое свойство также является реактивным, поэтому инициирует просмотр обновлений.Это необходимо использовать для добавления новых свойств к реактивным объектам, поскольку Vue не может обнаружить обычные добавления свойств

Полезная ссылка для чтения: Vue.js → Реактивность в глубине

Answer 2

Почему бы вам не сделать из вас массив кортежей или объектов, например:

 todos: [
        { task: ‘Have Breakfast’, isActive: false},
        // etc...
 ]

Затем в проверенном методе отфильтруйте todo, соответствующее имени, и измените только это свойство:

checked: function(task) {
      this.todos.filter((todo) => todo.task === task)
          .forEach((match) => match.isActive = !match.isActive)
}

Что затем позволяет добавить это в ваш шаблон:

<li v-for="todo in todos"  v-bind:class="{ completed: todo.isActive }" v-on:click="checked">
  {{ todo.task }}
</li>

В проверенной функции вы не сможете изменить свойство isActive объекта todo на месте, в которомна всякий случай это может быть немного сложнее, но я уверен, что это дает вам суть.

Надеюсь, это поможет.