vuethis.$set(对象，对象参数，参数值)赋值后，视图不渲染的问题解决

问题出现场景&＃xff1a;

电商小程序的购物车页面&＃xff0c;当选中某一个店铺时&＃xff0c;该店铺中所有的商品都要选中&＃xff0c;取消店铺的选中时&＃xff0c;店铺中的所有商品都要取消选中。

html结构

checkbox是多选框&＃xff0c;具体样式是方形的&＃xff0c;为了能够实现圆形&＃xff0c;可以在checkbox组件外面的标签中添加checkbox-round的class样式。

<checkbox :checked&＃61;"shop.checked" style&＃61;"transform:scale(0.7)" &＃64;click&＃61;"selectShop($event,shop)"/>


解释一下&＃xff1a;

1. checked 根据shop.checked参数来展示选中或者未选中
2. style是行间样式&＃xff0c;圆圈缩小为原来的0.7
3. click监听复选框的点击事件&＃xff0c;默认的第一个参数都是e&＃xff0c;就是点击事件本身&＃xff0c;第二个参数可以传递数据

selectShop(e,obj){// e代指点击事件本身&＃xff0c;obj就是传递的参数。const checked &＃61; !obj.checked;for (let i in obj.list) {obj.list[i].forEach(item &＃61;> {if (item.specSelected[0].stock) {item.checked &＃61; checked;} else {item.checked &＃61; false;}})}// 此处通过this.$delete先删除对象中的某个参数&＃xff0c;然后再通过this.$set进行赋值&＃xff0c;才能够实现视图渲染this.$delete(obj,&＃39;checked&＃39;);this.$set(obj,&＃39;checked&＃39;,checked);for (let i in this.shopList) {this.shopList[i].shoppingCartVoList.every(item2 &＃61;> {if(!item2.checked){this.allChecked &＃61; false;return true;}else{this.allChecked &＃61; true;}})}this.calcTotal();
},


知识点如下&＃xff1a;

在vue的使用过程中&＃xff0c;如果需要修改视图中的某个值&＃xff0c;一般可以通过直接赋值来实现。
如果针对的是对象中的某个值&＃xff0c;可以通过this.$set()的方式来处理。

this.$set(obj,&＃39;checked&＃39;,true);这段代码的意思就是&＃xff1a;将obj对象中的checked参数更改为true.
但是视图并没有发生改变。

百度一番后&＃xff0c;发现可以通过this.$delete()先将对象中的某个值删除&＃xff0c;然后再通过this.$set()的方式来进行赋值&＃xff0c;即可达到视图渲染的效果。