解决Vue中多层对象的数组属性push数据后视图不更新问题

贴上部分代码:

initObj.chatInfo.record.push({
from: 'other',
content: res.data[i].Content,
createTime: res.data[i].CreateTime,
state: 1
});

如上代码,initObj是我Vue的data中的一个数组其中一个对象,我是从Vue点击事件传参过来的initObj,此时执行以上代码push进一个对象数据时,发现视图并没有响应式更新,一直在找原因,网上说是因为Vue监听不到底层,得用set方法,但是我使用set还是无效并报错了,最终我自己摸索了一个办法:代码如下

// 解决Vue视图不更新的情况(重新赋值法)
var chatInfo = JSON.parse(JSON.stringify(initObj.chatInfo));
initObj.chatInfo = {};
initObj.chatInfo = JSON.parse(JSON.stringify(chatInfo));

我直接定义一个新的变量chatInfo来拷贝接收push过后initObj.chatInfo对象,然后将整个initObj.chatInfo赋值为空对象,再重新对它进行赋值接收变量chatInfo,此时发现视图有更新了!!!!!!!!

以上就是我自己摸索的土办法,有大神如果有更好的办法希望帮忙解答一下!!!

上述如果都无法执行,但你的数据缺实修改了,可以使用this.$forceUpdate()方法 (强制刷新)

你可能感兴趣的:(Vue渲染)