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