vue修改数据后,页面不重新进行渲染的问题(当点击其他页面元素会重新渲染数据)

您所在的位置:网站首页 vue数组清空重新渲染页面 vue修改数据后,页面不重新进行渲染的问题(当点击其他页面元素会重新渲染数据)

vue修改数据后,页面不重新进行渲染的问题(当点击其他页面元素会重新渲染数据)

2024-07-13 16:12| 来源: 网络整理| 查看: 265

问题

最近开发项目时,遇到一个非常特殊的问题(以前也遇到过但都用很多乱七八糟的方式解决了!),这个问题就是当我在methods的某一个方法中修改了页面v-for的数据时,本应该重新渲染的页面没有响应,还是维持老样子,当我点击页面上的其他组件时,页面才重新渲染出来。

给大家看一下就是下面这个效果。

在这里插入图片描述

下面这两个,是点击其他组件时又成功渲染出来的样子。

在这里插入图片描述 在这里插入图片描述

原因

这里说一个概念,在组件初始化的时候,对data中的某一个数组进行递归遍历,会对数组中数据的每一个属性进行劫持,添加set,get方法。我们后来新加的数据,并没有通过Object.defineProperty设置成响应式数据,修改后不会视图更新渲染。

这也是导致问题的根本原因,这里还有个原因是因为数据层次太多,没有触发render函数进行自动更新,所以才出现的第一次新增成功第二次新增失败。

解决

解决方法很简单,直接在你处理完的数据的方法中调用下面这个方法即可。

this.$forceUpdate();

下面是我加的位置,大家根据自己代码自行参考一下: 在这里插入图片描述

解决完成

在这里插入图片描述

喜欢的同学给个免费的点赞吧,Thanks♪(・ω・)ノ



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3