Как изменить цвет значка на кнопке нажмите на Vue 3? ⇐ Html

[Anonymous]

Я использую Vue 3 для своего приложения. В базе данных 10 человек, и каждый человек должен отображаться на карте. Пользователь может добавить любого человека в свой любимый список. Вот код, чтобы представить каждого человека;
< /p>


{{ person.name }}




{{ person.email }}




< /code>
export default {
name: "HomeView",
data: function () {
return {
people: [],
favourites: {},
isClicked: false,
};
},
methods: {
favouriteUser: async function (id) {
try {
let response = await UserService.favouriteUser({ userId: id });
response.data = this.favourites;
this.isClicked = true;
} catch (error) {
console.error(error);
}
},
},
};
< /code>

.clicked {
color: red;
}

< /code>
The selected user is added to the favorite list. But when the heart icon is clicked all cards' heart icons get red. It needs to get red only for the selected person. How to fix this issue? Thank you.


Подробнее здесь: https://stackoverflow.com/questions/731 ... k-in-vue-3