Vue.js

Question

在 Vue.js 中，我生成了一个对象列表。我想在单击特定 'star' 时为 'star' 着色。

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

我在这里制作了一个假人 fiddle：https://jsfiddle.net/t3f0rpqh/21/

实际上，它会成为一个很棒的字体图标（但我在这里遇到同样的问题 - 在图标更改时，列表中的每个图标都会更改，而不仅仅是单击的图标）。

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

我不知道如何将 star/icon 绑定到特定对象或如何仅对单击的 star/icon 着色。

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

提前致谢！

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 
  @click="starLocation(item.id)"
  :class="{ activeIcon: item.activeIcon}"
  :key="item.id"> STAR
</p>

Working Demo

Vue.js - 在 v-for 生成的列表中切换点击图标

Vue.js - Toggle clicked icon in v-for generated list

javascript

data-binding

list

toggle