zoukankan      html  css  js  c++  java
  • vue.js, v-charts 更新数据,组件/视图不刷新

    component does not update after modify chartData

    https://github.com/ElemeFE/v-charts/issues/276

    修改数据后 视图没有更新
    即使 用了 vue.set 修改了数据,但是视图组件还是没有刷新

    问题解决:
    - 定义 data 里的数据才会被监听 :使用函数返回 包裹chardata 对象
    - 方法,使用 set 等被监听的方法 vue doc对象更改检测注意事项

    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
    <script src="//unpkg.com/v-charts/lib/index.min.js"></script>
    
    <div id="app">
      <ve-line :data="chartData" :settings="chartSettings"></ve-line>
    </div>
    
      <script>
      var vm = new Vue({
        el: '#app',
        data: function () {
           return {chartData:{
                    columns: ['日期', '销售额-1季度', '销售额-2季度', '占比', '其他'],
                  rows: [
                    { '日期': '1月1日', '销售额-1季度': 1523, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
                    { '日期': '1月2日', '销售额-1季度': 1223, '销售额-2季度': 1523, '占比': 0.345, '其他': 100 },
                    { '日期': '1月3日', '销售额-1季度': 2123, '销售额-2季度': 1523, '占比': 0.7, '其他': 100 },
                    { '日期': '1月4日', '销售额-1季度': 4123, '销售额-2季度': 1523, '占比': 0.31, '其他': 100 },
                    { '日期': '1月5日', '销售额-1季度': 3123, '销售额-2季度': 1523, '占比': 0.12, '其他': 100 },
                    { '日期': '1月6日', '销售额-1季度': 7123, '销售额-2季度': 1523, '占比': 0.65, '其他': 100 }
                  ]
                }
            }
        },
        methods :{ change(){
                        var lis = ['日期', '销售度', '销售额度', '占比', '其他'];
                        for (var i = 0; i <= lis.length - 1; i++) {
                            this.$set(this.chartData.columns,i,lis[i]);
                        }
                 }
        }
      });
    </script>
    

    外部修改数据 更新视图 :

    // 调用 自定义方法 (建议)
    vm.change();

    // data 属性修改
    var lis = ['日期', '销售度', '销售额度', '占比', '其他'];
    Vue.set(vm.chartData, 'columns', lis);

    // 属性列表单个修改
    Vue.set(vm.chartData.columns, 1, 'ss8s');

    console.log(vm.chartData.columns);

  • 相关阅读:
    SpringCloud笔记(一)服务注册与发现
    个人备忘录
    ActiveMQ 消息持久化到Mysql数据库
    染色 [组合数 容斥]
    各种图床
    NOIP2012 疫情控制
    网格计数
    找钱 [多重背包 计数]
    序列[势能线段树]
    牛客挑战赛33 B-鸽天的放鸽序列
  • 原文地址:https://www.cnblogs.com/willowj/p/9055660.html
Copyright © 2011-2022 走看看