在我的收藏列表里取消收藏功能的實現(不使用直接操作dom的方法)


流程介紹

用戶點擊取消收藏 -> 請求取消收藏接口 -> 取消收藏成功 -> 在視圖層隱藏當前欄 ->視圖層上給予用戶取消收藏成功的直觀感受

如何實現

<view v-for="(item,index) in videoList" :key="index" v-show="item.vid!=-1" >  //重要:根據vid是否為-1控制顯隱
      <view>......</view>
      <view @click="cancelCollection(item.vid,index)">取消收藏</view>
</view>


cancelCollection(vid,index){
      this.$axios.post(`${this.$baseUrl}/api-video/cancelcollection?vid=${vid}`).then(res=>{
            if(res.data.code==200){
                  this.videoList[index].vid=-1  //取消收藏成功后,將vid設為-1,此欄隱藏
                  this.$toast("取消收藏成功")
            }else{
                  this.$toast(res.data.msg)
            }
      }).catch(()=>{})
}

注:若不想操作原數據,則可以在拿到數據后通過$set自定義一個控制顯隱的字段如isshow,通過控制isshow的值來控制視圖層顯隱
$set語法:this.$set(this.videoList[0], 'isshow', 'true'),
詳細了解$set看這里: https://www.cnblogs.com/huihuihero/p/12196166.html 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM