【vue】Vue数据发生改变但页面却没有实时更新
问题的出现:由于想实现用户的增加,将其数据保存在本地,结果问题就来了。。。。。这里写篇记录一下,帮助有用的人问题:点击这里的编辑,将编辑完的用户数据存到数组中,然后将这里的值传给子组件的props属性,然后el-table去渲染,但是值改变后页面没有更新。。。。。这里给大家看看值:然后我看到一篇博客,去尝试监听解决,但是监听写了,发现数据有的监听不到,有的就可以,最后找到了解决办法。附上最后看到的
问题的出现:
由于想实现用户的增加,将其数据保存在本地,结果问题就来了。。。。。这里写篇记录一下,帮助有用的人
问题:
点击这里的编辑,将编辑完的用户数据存到数组中,然后将这里的值传给子组件的props属性,然后el-table去渲染,但是值改变后页面没有更新。。。。。
这里给大家看看值:
然后我看到一篇博客,去尝试监听解决,但是监听写了,发现数据有的监听不到,有的就可以,最后找到了解决办法。
附上最后看到的博客:
他人博客1
他人博客2
解决办法:
用vue里的this.$set()方法,该方法是vue自带的可对数组和对象进行赋值,并触发监听的方法。直接将值修改,有三个参数
第一个参数为你要改变的数组或对象
第二个参数为下标,或者元素名称
第三个参数为新值
附上我改完之后的代码:
this.studentInfo.forEach((item, index) => {
if (item.id === this.updatedid) {
this.$set(this.studentInfo, index, addinfo)
}
})
总结:
问题总算是解决了,但是搜博客时,其他博主写到数据改变但页面没更新出现的俩种错误现象:
1、watch或者computed监听到数据的变化但是页面却没有实时更新
2、没有监听到数据的变化
这里为什么会出现这种现象呢,值得我去深思,来防止以后再掉到这种坑中,在写完该项目之后,我会去好好看看this.$set方法,以及这个问题出现的原因!!!
花了一天的事件终于解决,真不容易,狗生艰难
最后希望能帮助到有此问题的朋友们,或者有啥问题,也可以关注我一下一起讨论,人多力量大,学习永无止境
更多推荐
所有评论(0)