在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
html代码:
<div>
<span class="price">
{{ newSkuItem.price }}
</span>
</div>
js代码:
data() {
return {
goodsInfo: {
skuItem: {
price: '0.00'
}
}
}
},
computed: {
newSkuItem() {
return this.goodsInfo.skuItem
}
},
methods: {
changeGoodsDetail() {
// 处理数据变化页面未渲染问题
this.$set(this.goodsInfo.skuItem, 'price', this.selectSkuItem.price)
this.$forceUpdate()
}
}
使用$set和$forceUpdate来触发Vue数据变化的监听,用computed响应数据变化,进而触发界面刷新。