vue.js-为生成的列表切换v-中单击的图标

问题描述

在Vue.js中，我生成了一个对象列表。 单击特定‘STAR’时，我想给‘STAR’上色。

但是当我单击一颗星星时，列表中的每一颗星星都会变色。

我在这里做了一个虚拟小提琴：https://jsfiddle.net/t3f0rpqh/21/

实际上，它将是一个字体很棒的图标(但我这里也有同样的问题-更改图标时，列表中的每个图标都会更改，而不仅仅是单击的图标)。

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

我不知道如何将星形/图标绑定到特定对象，也不知道如何仅为单击的星形/图标着色。

有什么想法或解决方案吗？

提前感谢您！

推荐答案

您可以通过向每个待办事项添加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 }
  ]
}    

和updatestarLocation方法，如：

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

并最终更新您的模板，如下所示：

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

Working Demo