ajax更新vue属性,【经验分享】VUE中对象属性发生变化以后，页面没有更新，使用强制更新$forceUpdate()...

概要

本文是自己编写项目的时候，遇到更新对象以后，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 }]"

:style="'width:100px;height:100px;background-image: url(' + $oss + '/' + item.url + ')'"

:class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"

>

{{ item.name }}

设定点击事件，更新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机制。