总结一下vue添加收藏取消收藏功能
总结一下vue添加收藏取消收藏功能最近做这个商城项目，就有很多比较重要的知识点，除了购物车，还有提交订单选择地址，使用优惠券等，以及我要说的这个添加收藏的功能；话不多说。上图：未收藏：已收藏：逻辑为，在进入商品详情页之前，所要展示的数据应该带有id，和status（Boolean）状态，id确保进入详情页展示这个商品，status用于控制收藏的状态。在点击收藏的时候两步操作，...
·
总结一下vue添加收藏取消收藏功能
最近做这个商城项目，就有很多比较重要的知识点，除了购物车，还有提交订单选择地址，使用优惠券等，以及我要说的这个添加收藏的功能；
话不多说。上图：
未收藏：
已收藏：
逻辑为，在进入商品详情页之前，所要展示的数据应该带有id，和status（Boolean）状态，id确保进入详情页展示这个商品，status用于控制收藏的状态。
在点击收藏的时候两步操作，
1，向我的收藏collection.js中插入这个数据，用于在我的收藏处展示。
2，向原来的商品数据列表，传递id和状态，改变商品列表中的商品状态，用来保证即使退出，再回来，这个商品依然是已经收藏的状态。
3，还有重要的部分。
例如，进入详情页的时候，在created中先拿到这个数据，重在这个数据的状态值用于控制收藏按钮的状态。当点击的时候，让这个状态变为true，。并且需要在beforeDestroy中传递新的数据回去到商品列表，也可能这一步是多余的
前往低代码交流专区
更多推荐
11
0- 0
已为社区贡献20条内容
所有评论(0)