#vue.js
#vue.js
Вопрос:
Я извлекаю данные из API, массив идет нормально, в цикле V-For
<div style="width: 20px; float: right">
<i class="fa fa-heart-o" @click="favourite(item.content_id)" v-if="item.is_fav_status == 0"></i>
<i class="fa fa-heart" @click="favourite(item.content_id)" v-if="item.is_fav_status == 1"></i>
</div>
Итак, если из ответа приходит ‘0’, то он не является избранным, а если это ‘1’, то он уже выбран.
Теперь, если он не включен в избранное, и по щелчку он успешно становится избранным с помощью какого-либо POST Api, но я хочу сделать его реактивным, поэтому значок и функция меняются соответствующим образом при выполнении избранного и Unfavourite
Ответ №1:
Передайте весь элемент обработчику кликов:
@click="favourite(item)"
Там переключите значение вместе с тем, что вы уже делаете с content_id
:
async favourite(item) {
const response = await axios.post(url) // Existing call can use `item.content_id`
item.is_fav_status = !item.is_fav_status; // Toggle the value
}