iview-admin使用模块更新统计表的时候问题小记录

问题描述:
统计数据组件的更新


image.png

当我们JSON数据从接口返回的时候:

{
    "return_code": 0,
    "return_descript": "成功",
    "return_data": {
        "inforCardData": [{
            "title": "新增用户",
            "count": 22534456,
            "icon": "md-person-add",
            "color": "#2d8cf0"
        }, {
            "title": "累计点击",
            "count": 262,
            "icon": "md-locate",
            "color": "#19be6b"
        }, {
            "title": "新增问答",
            "count": 464,
            "icon": "md-help-circle",
            "color": "#ff9900"
        }, {
            "title": "分享统计",
            "count": 667,
            "icon": "md-share",
            "color": "#ed3f14"
        }, {
            "title": "新增互动",
            "count": 675,
            "icon": "md-chatbubbles",
            "color": "#E46CBB"
        }],
        "barData": {
            "星期一": 12,
            "星期三": 34,
            "星期四": 433,
            "星期五": 334,
            "星期六": 6,
            "星期天": 4,
            "星期二": 234
        }
    }
}

前端直接的读取对应的值进行设置更新(及时性刷新数据)
疑问点:
1: 数组可以直接刷新设置,但是不知道为何barData的值无法刷新

前端定义的属性值:


image.png

参考解决方案:
https://blog.csdn.net/weixin_43056561/article/details/82626374

image.png

更新数据方式1:


image.png

更新数据方式2:


image.png
image.png

可惜最终上述的方案对无法改变上面的数据:

经过朋友指点,观察一下子组件的数据变化,添加了相关监测数据变化

image.png

image.png

观察数据变化:


image.png

值是已经被正确的更新了!对应的属性也是更新,只是没有主动的更新到组件上面!!

后来直接重新在监听数据变化的地方调用这个封装好的方法就正常了!!

houlai

子组件里再把对应的新的数据更新到组件上面:

image.png

主要知识点关联:
Vue.nextTick 的原理和用途

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 21,570评论 2 80
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 4,276评论 1 25
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 4,704评论 4 7
  • 收拾收拾烦躁的性情,突然想起一句话,"如果时光可以倒流,这世上一半的人将成就伟大"。
    艾蕤阅读 18评论 0 0
  • *String 字符串类 说明:字符串是常量,一旦创建了就不能修饰了,字符串的内容一旦发生了变化就会创建新对象 字...
    Michael_林阅读 41评论 0 1