vue 收藏和取消收藏的点击事件

描述

点击“取消收藏“，图标切换，文字变为“收藏“，收藏状态变为”未收藏“，刷新页面”未收藏“数据不再显示

思路

通过if判断，给定这条数据一个状态，点击改变状态值（状态需要后端在接口里返回）

• 未点击时，图标亮，状态为true
• 点击时，图标灰，数据从列表消失改变为false

template

 <div
  class="star_on_off"
  @click="cancelCollection(item, index)"
  style="cursor: pointer"
  >
     <img src="@/assets/star.png" v-if="!item.state" />
     <img src="@/assets/star_active.png" v-else />
      <p v-if="!item.state">未收藏</p>
      <p v-else>收藏</p>
 </div>

 data

 stateData: {}, //收藏状态

 methods

给后端返回状态和id

    /***
     * 取消收藏
     */
    async cancle(item, index) {
      console.log(item, "111");
      // cancleFavorite收藏接口
      let res = await cancleFavorite({
        id: item.baikeId,
        remove: item.state,
      });
      if (res.code == "200") {
        // console.log(res)
        this.onSearch();
      } else {
        this.onSearch();
        this.$message.warning(res.msg);
      }
    },
    // 收藏/取消收藏操作
    cancelCollection(item, index) {
      // console.log(item, "9");
      this.stateData.loginUserFavorite = !this.stateData.loginUserFavorite;
      this.cancle(item, index);
    },

列表刷新

在created里调查询事件（获取列表信息）

 created() {
    this.onSearch();
  },