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);

  • 相关阅读:
    rem是如何实现自适应中的?
    meta基础知识
    JqueryMobile动态生成listView并实现刷新的两种方法
    javascript中for/in循环及使用技巧
    JavaScript中this详解
    使用css实现全兼容tooltip提示框
    如何使用CSS3画出一个叮当猫
    jQuery实现的Div窗口震动效果实例
    jQuery实现动态添加和删除一个div
    js对文章内容进行分页示例代码
  • 原文地址:https://www.cnblogs.com/willowj/p/9055660.html
Copyright © 2011-2022 走看看