Любимый неблагоприятный параметр из Axios API в Vuejs

#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
}