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

2022-03-24 00:00:00 list toggle javascript vue.js data-binding

在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

相关文章