【vue】Vue数据发生改变但页面却没有实时更新

转载已于 2022-04-04 18:16:01 修改 · 6.5k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/daoxiaofei/article/details/108556621?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E8%B0%83%E8%AF%95%E4%B8%AD%E6%95%B0%E6%8D%AE%E9%83%BD%E5%B7%B2%E7%BB%8F%E6%94%B9%E5%8F%98%E4%BA%86%EF%BC%8C%E4%BD%86%E6%98%AF%E6%B2%A1%E6%9C%8

文章标签：

#数据发生改变页面没有更新 #el-table没渲染

于 2022-04-04 18:06:30 首次发布

vue 专栏收录该内容

11 篇文章

订阅专栏

本文记录了解决Vue中数组数据修改但页面未更新的问题，通过使用this.$set方法实现监听并更新视图。重点探讨了数据变化未被监听及页面不更新的现象，以及$set方法的作用和原理。

问题的出现：

由于想实现用户的增加，将其数据保存在本地，结果问题就来了。。。。。这里写篇记录一下，帮助有用的人

问题：

在这里插入图片描述
点击这里的编辑，将编辑完的用户数据存到数组中，然后将这里的值传给子组件的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方法，以及这个问题出现的原因！！！

花了一天的事件终于解决，真不容易，狗生艰难
在这里插入图片描述