概要
本文是自己编写项目的时候,遇到更新对象以后,Vue页面不变化的情况。在找了一堆资料并且各种频繁测试后,才发现要使用forceUpdate的情况。
这个情况虽然很小,但是如果没有遇到类似问题,切实会耽误很多时间,故而分享给大家,希望对大家能有帮助。
分享的知识点包括:
- 对从数据库取得的数组,增加新的属性
- 通过新的页面实现选中和不选中的效果(在v-for的具体事例)
场景
在弹出的图片选择层,选择图片后,并进行高亮提示,如图:
设计思路
- 使用ajax取得图像数组
- 为每个数组设置属性choose
- 使用v-for循环图片
- 设置点击事件,如果点击,设计值choose = 1,选中;页面更新
具体代码
- 使用ajax取得图像数组,事例中的数组为“this.materials”
- 为每个数组设置属性choose,需要for循环,增加属性choose
this.$axios(`/api/material/list`)
.then(res => {
this.materials = res.data;
// 为每个对象设置choose属性
for (let n1 = 0; n1 < this.materials.length; n1++) {
if (typeof this.materials[n1].choose === "undefined") {
this.materials[n1].choose = 0;
}
}
console.log(res.data);
})
.catch(err => {
console.log(err);
});
- 使用v-for循环图片
此代码中的样式等,已经去掉,避免干扰,只留下主要代码。
重要代码为
:class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"
<div v-for="(item, index) in this.materials" :key="index" class="..." @click="chooseGoodswipe(index)">
<div
:style="'width:100px;height:100px;background-image: url(' + $oss + '/' + item.url + ')'"
:class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"
></div>
<div>{{ item.name }}</div>
</div>
- 设定点击事件,更新choose属性,注意最后用到了“ this.$forceUpdate();”
chooseGoodswipe(index) {
if (this.materials[index].choose === 1) {
// 取消选择
this.materials[index].choose = 0;
} else {
// 选择
this.materials[index].choose = 1;
}
// this.$forceUpdate();
},
如果没有this.$forceUpdate()页面是没有任何变化的。
原因
因为数据对象的层级较多,导致不会触发render事件,页面也就不会变化。
解决方案
在设计到两级,或者中途修改了属性的,都会导致页面不会自动更新。如果你发现页面乜有更新,那么就强制更新就行了。
备注
在使用数组、对象、以及需要多次赋值的时候,页面的更新是非常头疼的问题,经常会各种问题频发。这种情况,调试的时候一定要有耐心,多去调试,就能更加深刻的理解Vue的render机制。
网友评论