关于vue数组中对象属性变更页面没重新渲染的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于vue数组中对象属性变更页面没重新渲染的问题相关的知识,希望对你有一定的参考价值。

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数,

具体用法:

  arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值

  

this.footerList.$set(i, {
siteId : monitorSiteData[j].siteId,
outNum : monitorSiteData[j].outNo,
bookNum : monitorSiteData[j].preorderNo,
useNum : monitorSiteData[j].availableNo,
onlineNum : monitorSiteData[j].prepareNo,
homeNum : monitorSiteData[j].inNo,
name : self.footerList[i].name
});这是我在项目中使用的情况,完美解决vue数组中对象属性改变页面不刷新的问题!
请大家多多指教

以上是关于关于vue数组中对象属性变更页面没重新渲染的问题的主要内容,如果未能解决你的问题,请参考以下文章

vue2循环数组对象,没有的属性会报错,怎么办

vue数组中对象属性变化页面不渲染问题

vue中数组删除,页面没重新渲染

vue的watcher 关于数组和对象

vue 改变数组中对象的属性怎么重新渲染列表

Vue 改变数组中对象的属性不重新渲染View的解决方案