总结一下vue添加收藏取消收藏功能

总结一下vue添加收藏取消收藏功能
最近做这个商城项目，就有很多比较重要的知识点，除了购物车，还有提交订单选择地址，使用优惠券等，以及我要说的这个添加收藏的功能；
话不多说。上图：
未收藏：

已收藏：

逻辑为，在进入商品详情页之前，所要展示的数据应该带有id，和status（Boolean）状态，id确保进入详情页展示这个商品，status用于控制收藏的状态。

在点击收藏的时候两步操作，
1，向我的收藏collection.js中插入这个数据，用于在我的收藏处展示。
2，向原来的商品数据列表，传递id和状态，改变商品列表中的商品状态，用来保证即使退出，再回来，这个商品依然是已经收藏的状态。
3，还有重要的部分。

例如，进入详情页的时候，在created中先拿到这个数据，重在这个数据的状态值用于控制收藏按钮的状态。当点击的时候，让这个状态变为true，。并且需要在beforeDestroy中传递新的数据回去到商品列表，也可能这一步是多余的

总结一下vue添加收藏取消收藏功能相关推荐

vue收藏/取消收藏，点赞、取消点赞一个道理，切换图标
vue收藏/取消收藏,点赞.取消点赞一个道理,切换图标 <div class="zixun" @click="getFoodFindFoodDetails()&qu ...
Vue3 使用vant actionBar组件后对icon图标的点击切换效果/点击收藏/取消收藏
制作收藏的点击收藏.取消收藏的图标切换效果效果: vue: <template><van-action-bar><van-action-bar-icon icon=&q ...
微信小程序---收藏/取消收藏（点改）
wxml <view class="left" bindtap="haveSave"> <image class="save&quo ...
收藏取消收藏html,一键解除网页限制，浏览器收藏夹书签小工具
一键解除网页限制,浏览器收藏夹书签小工具经常上网都会遇到一些网站不能复制文字.不能选择或者不能使用右键菜单,有时候非常的不方便. 比如:要用朗读女,读选中文字时,如果该网站有网页限制:不支持选中,复 ...
ECS6基础-案例：百度音乐全选、添加、收藏、删除功能
百度音乐案例同上篇文章类似,都基于ECS6基础知识,重点在于掌握逻辑语法,css样式等不做过多追求 1. 实现功能添加音乐到列表选中效果删除所选音乐收藏和取消收藏全选功能和全不选功能实现 ...
微信小程序实现收藏和取消收藏功能
话不多说,直接上代码 js data:{isFavorite: false, },//收藏 collect: function(options) {console.log(options)var th ...
EasyGBS视频平台添加重点摄像机收藏模块
TSINGSEE青犀视频开发的国标GB28181协议视频智能分析平台EasyGBS已经兼容了采集-存储-展示-告警这四大模块的内容处理,能够为大数据平台的搭建提供视频能力上的支持.同时为了增强Easy ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
ant vue 设置中文_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
收藏本站——添加到浏览器收藏夹
收藏本站--添加到浏览器收藏夹原生 js,兼容所有的浏览器(ie,chrome,firefox),值得收藏. 函数如下: function addFavorite(obj, opts){var _t ...

总结一下vue添加收藏取消收藏功能

总结一下vue添加收藏取消收藏功能相关推荐

最新文章

热门文章