vue修改数据后,页面不重新进行渲染的问题(当点击其他页面元素会重新渲染数据)
问题最近开发项目时,遇到一个非常特殊的问题(以前也遇到过但都用很多乱七八糟的方式解决了!),这个问题就是当我在methods的某一个方法中修改了页面v-for的数据时,本应该重新渲染的页面没有响应,还是维持老样子,当我点击页面上的其他组件时,页面才重新渲染出来。给大家看一下就是下面这个效果。下面这两个,是点击其他组件时又成功渲染出来的样子。原因这里说一个概念,在组件初始化的时候,对data中的某一
·
问题
最近开发项目时,遇到一个非常特殊的问题(以前也遇到过但都用很多乱七八糟的方式解决了!),这个问题就是当我在methods的某一个方法中修改了页面v-for的数据时,本应该重新渲染的页面没有响应,还是维持老样子,当我点击页面上的其他组件时,页面才重新渲染出来。
给大家看一下就是下面这个效果。
下面这两个,是点击其他组件时又成功渲染出来的样子。
原因
这里说一个概念,在组件初始化的时候,对data中的某一个数组进行递归遍历,会对数组中数据的每一个属性进行劫持,添加set,get方法。我们后来新加的数据,并没有通过Object.defineProperty设置成响应式数据,修改后不会视图更新渲染。
这也是导致问题的根本原因,这里还有个原因是因为数据层次太多,没有触发render函数进行自动更新,所以才出现的第一次新增成功第二次新增失败。
解决
解决方法很简单,直接在你处理完的数据的方法中调用下面这个方法即可。
this.$forceUpdate();
下面是我加的位置,大家根据自己代码自行参考一下:
解决完成
喜欢的同学给个免费的点赞吧,Thanks♪(・ω・)ノ
更多推荐
已为社区贡献7条内容
所有评论(0)