在我的收藏列表里取消收藏功能的实现(不使用直接操作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