本文介绍了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
这篇关于vue.js-为生成的列表切换v-中单击的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！