LokTin
新手
新手
  • 最后登录2021-04-28
  • 发帖数1
阅读:568回复:0

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

楼主#
更多 发布于:2021-04-08 13:40
最近用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 => {
                item.isCheck = isCheck;
                return item;
            })
        }
```
后发现单点商品的checkbox页面不刷新,于是使用了 this.$forceUpdate();
强制页面刷新
```
itemCheck(isCheck,index2,index) {
            this.cartInfo[index].goods[index2].isCheck = isCheck
            this.$forceUpdate();
        },
```
游客


返回顶部

公众号

公众号