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

猜你喜欢

转载自www.cnblogs.com/willowj/p/9055660.html