已解决:Vue改变数据后界面不自动渲染,Vue中使用v-for遍历对象数组,当给其中某个元素对象重新赋值之后,页面组件列表没有渲染更新。

问题如标题所说,Vue中使用v-for遍历对象数组,当给数组其中某个元素对象重新赋值之后,页面组件列表没有及时更新渲染,而是在页面进行了其他的渲染操作以后列表才更新出来新的数据,那同样给对象内的属性值赋值也可能存在不渲染的情况,一并解决,尤其发生在网络请求成功后的线程中操作数据

1、先说原理和问题原因:
Vue 的数据响应式系统可以监测到数组的变化,但是它不能检测到数组某个索引位置的元素直接赋值的变化,这就导致你通过直接修改数组的第一项元素,而没有触发组件的重新渲染。同样给对象内的属性值赋值也可能存在不渲染的情况,一并解决

2、再说解决方法:
为了解决这个问题,你可以使用 Vue 提供的 $set 方法或者 Vue.set 方法来改变数组的某个索引位置的元素。

例如,假设你的数组是 list,你要修改数组的第一项元素,你可以使用以下代码:

this.$set(this.list, 0, newValue);

或者

Vue.set(this.list, 0, newValue);

其中,第一个参数是要修改的数组,第二个参数是要修改的索引位置,第三个参数是要设置的新的值。

同样给对象内的属性值赋值也可能存在不渲染的情况,也用这个方法:

this.$set(this.currentRow, 'fileUrl', res.data.fileUrl);

在这个例子中,currentRow 是一个对象,我们使用 $set 方法将其 fileUrl 属性更新为上传成功后的 URL。这样,即使 Vue 无法检测到属性的变化,也能够触发响应式更新,重新渲染界面。

这样,当你使用 $set 或 Vue.set 方法来改变数组的某个索引位置的元素时,Vue 就能够检测到数组的变化,从而触发组件的重新渲染。

额外方案:

使用 $forceUpdate 方法强制更新组件:
如果你的更新操作比较复杂,或者使用了计算属性等高级特性,可能会导致 Vue 无法正确地检测到数据变化,从而无法自动重新渲染界面。这时候可以使用 $forceUpdate 方法强制更新组件,例如:

this.$forceUpdate();

在这个例子中,我们使用 $forceUpdate 方法强制更新组件,这样就能确保界面上的数据和组件实例的数据保持一致。

猜你喜欢

转载自blog.csdn.net/Spy003/article/details/129913699