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

亦凉 2021-07-25 23:35 866阅读 0赞

问题出现场景：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
电商小程序的购物车页面，当选中某一个店铺时，该店铺中所有的商品都要选中，取消店铺的选中时，店铺中的所有商品都要取消选中。

### html结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
`checkbox`是多选框，具体样式是方形的，为了能够实现圆形，可以在`checkbox`组件外面的标签中添加`checkbox-round`的class样式。

解释一下：

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

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

知识点如下：

# 视图渲染问题 #

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

# `this.$set()`赋值后视图不渲染 #

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

# `this.$delete()`解决`this.$set()`视图不渲染的问题 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/1e9abce3cfc7466a8ef65e4204ce0964.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/7a16c90841fc4cadbe2729364b938e3f.png