Vue使用vue-Chartkick绘制多系列图表异步赋值不生效问题

你遇到的异步赋值后图表不渲染的核心原因是Vue 2的响应式更新限制，以及部分图表组件不会主动深度监听内部嵌套数据的变更：

1. Vue 2无法检测直接通过索引修改数组元素属性的操作，也无法检测给已有对象新增根级属性的操作，这类修改不会触发视图更新
2. vue-chartkick的line-chart组件默认仅监听data属性的引用变更，如果你仅修改内部嵌套的data字段，未改变外层数组的引用，组件不会触发重渲染

推荐最简单的方案是直接替换整个data数组，修改引用即可触发响应式更新和组件重渲染，修改后的代码如下：

<template>
    <line-chart :data="data"></line-chart>
</template>

<script>
import axios from "axios";
export default {
    name: 'SummaryGraph',
    data () {
        return {
            data: []
        }
    },
    created() {
        let apiURL_1 = axios.get('http://localhost:3000/MyfirstData');
        let apiURL_2 = axios.get('http://localhost:3000/MysecondData');

        axios.all([apiURL_1, apiURL_2]).then(axios.spread((first_response, second_response) => {
            // 处理两份接口返回数据
            const firstProcessed = first_response.data.reduce((result, current) => Object.assign(result, current), {});
            const secondProcessed = second_response.data.reduce((result, current) => Object.assign(result, current), {});
            // 直接替换整个data数组，修改引用触发响应式
            this.data = [
              {name: 'A', data: firstProcessed},
              {name: 'B', data: secondProcessed}
            ]
        })).catch(error => {
            console.log(error)
        });
    }
}
</script>

如果不想替换整个数组，也可以使用Vue提供的$set方法触发响应式：

// 替换原来的直接赋值逻辑
this.$set(this.data[0], 'data', firstProcessed)
this.$set(this.data[1], 'data', secondProcessed)

如果上述方法仍不生效，可以给line-chart组件添加动态key强制重渲染：

<line-chart :data="data" :key="renderKey"></line-chart>

// data中新增renderKey字段
data () {
  return {
    data: [
      {name: 'A', data: {}},
      {name: 'B', data: {}}
    ],
    renderKey: 0
  }
}
// 赋值完成后更新key
this.$set(this.data[0], 'data', firstProcessed)
this.$set(this.data[1], 'data', secondProcessed)
this.renderKey += 1

内容的提问来源于stack exchange，提问作者Cristian