Vue. js - Переключить нажатый значок в сгенерированном списке

Question

В Vue. js Я создал список объектов. Я хотел бы закрасить «звезду», когда указывается c «звезда».

Но когда я нажимаю на звезду, каждая звезда в списке окрашивается.

I Здесь мы сделали фиктивную скрипку: https://jsfiddle.net/t3f0rpqh/21/

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

 <font-awesome-icon
  :class="{ activeIcon: activeIcon}"
  :icon="icon"
  v-on:click="starLocation(item.id)"
 />

Я не знаю, как связать звезду / значок с указанным c объектом или как закрасить только нажатую звездочку / значок.

Есть идеи или решения?

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

Answer 1

Вы можете исправить это, добавив свойство activeIcon к каждому элементу задачи и переключая их специально, например:

data: {
   todos: [
    { text: "Learn JavaScript", id: "Location4", activeIcon: false },
    { text: "Learn Vue", id: "Location3", activeIcon: false },
    { text: "Play around in JSFiddle", id: "Location2", activeIcon: false },
    { text: "Build something awesome", id: "Location1", activeIcon: false }
  ]
}    

и метод обновления starLocation, например:

starLocation(id) {
  try {
     var todo = this.todos.find(t => t.id === id)
     todo.activeIcon = !todo.activeIcon;
  } catch (error) {
    alert(error);
  }
}

и, наконец, обновите ваш шаблон, например:

<p 
   v-on:click="starLocation(item.id)"
   :class="{ activeIcon: item.activeIcon}"
   :key="item.id"> STAR
</p>

Рабочая демонстрация