VUE+vant-ui电商项目购物车页面，修改数组中的值后发现页面没有同步渲染

最新推荐文章于 2024-02-25 08:17:59 发布

原创

最新推荐文章于 2024-02-25 08:17:59 发布 · 563 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

在Vue结合Vant-UI开发电商APP购物车功能时遇到一个问题，当修改购物车数组中checkBox的值时，页面未能自动更新。为解决这个问题，尝试了两种方法：1) 使用Array.map创建新数组；2) 应用Vue的this.$set方法。在单选商品的checkBox场景下，使用this.$forceUpdate()强制更新视图，从而实现了页面同步。

最近用vant-ui+vue做了一个电商APP，在做购物车页面checkBox时发现，点击checkBox绑定的值变了，但页面没有同步刷新，最后的解决方案如下：
1.利用map返回新数组

            this.cartInfo =   this.cartInfo.map( item => {
                    item.isCheck = this.orderChecked;
                    item.goods = item.goods.map(item2 => {
                         item2.isCheck = this.orderChecked;
                         return item2;
                    })
                    return item;
                })

2.vue的set方法

this.cartInfo.forEach( (item,index) => {
                   item.isCheck = this.orderChecked
                   item.goods.forEach(item2 => {
                       item2.isCheck = this.orderChecked
                   })
                   this.$set(this.cartInfo,index, item)
               })

上面是全选按钮。点击店铺选择店铺下的所有商品如下：

shopCheck(isCheck,index) {
            this.cartInfo[index].goods =  this.cartInfo[index].goods.map( item => {

最低0.47元/天解锁文章

VUE+vant-ui电商项目 购物车页面，修改数组中的值后发现页面没有同步渲染

1 条评论

VUE+vant-ui电商项目购物车页面，修改数组中的值后发现页面没有同步渲染