Vue.js 使Chartkick在渲染图表之前等待数据从Firebase填充

我在Vue项目中使用chartkick。现在，数据是在图表呈现后从Firebase加载的，因此图表是空白的。当我在编辑器中更改代码时，图表按预期呈现，因为它已经从Firebase中检索到。有没有办法让chartkick在尝试渲染图表之前等待数据加载？谢谢

折线图组件：

<template>
  <div v-if="loaded">
    <line-chart :data="chartData"></line-chart>
  </div>
</template>

<script>
export default {
  name: 'VueChartKick',
  props: ['avgStats'],
  data () {
    return {
      loaded: false,
      chartData: this.avgStats
    }
  },
  mounted () {
    this.loaded = true
  }
}
</script>

导出默认值{
名称：“VueChartKick”，
道具：['avgStats']，
数据（）{
返回{
加载：false，
chartData:this.avgStats
}
},
挂载（）{
this.loaded=true
}
}

家长：

<template>
  ...
  <stats-chart v-if="avgStatsLoaded" v-bind:avgStats="avgStats" class="stat-chart"></stats-chart>
  <div v-if="!avgStatsLoaded">Loading...</div>
  ...
</template>

<script>
import StatsChart from './StatsChart'

export default {
  name: 'BBall',
  props: ['stats'],
  components: {
    statsChart: StatsChart
  },
  data () {
    return {
      avgStatsLoaded: false,
      avgStats: []
    }
  },
  computed: {
    sortedStats: function () {
      return this.stats.slice().sort((a, b) => new Date(b.date) - new Date(a.date))
    }
  },
  methods: {
    getAvgStats: function () {
      this.avgStats = this.stats.map(stat => [stat.date, stat.of10])
      this.avgStatsLoaded = true
    }
  },
  mounted () {
    this.getAvgStats()
  }
}

...
加载。。。
...
从“/StatsChart”导入StatsChart
导出默认值{
名称：“BBall”，
道具：['stats']，
组成部分：{
斯塔查特：斯塔查特
},
数据（）{
返回{
avgStatsLoaded:错误，
avgStats:[]
}
},
计算：{
sortedStats:函数（）{
返回此.stats.slice（）.sort（（a，b）=>新日期（b.Date）-新日期（a.Date））
}
},
方法：{
getAvgStats:函数（）{
this.avgStats=this.stats.map（stat=>[stat.date，stat.of10]）
this.avgStatsLoaded=true
}
},
挂载（）{
this.getAvgStats（）
}
}

修改StatsChart组件的代码： 你可以直接使用道具

<template>
  <div v-if="loaded">
    <line-chart :data="avgStats"></line-chart>
  </div>
</template>

export default {
  name: 'VueChartKick',
  props: ['avgStats'],
  data () {
    return {
      loaded: false,
    }
  },
  mounted () {
    this.loaded = true
  }
}

导出默认值{
名称：“VueChartKick”，
道具：['avgStats']，
数据（）{
返回{
加载：false，
}
},
挂载（）{
this.loaded=true
}
}

显示折线图的代码component@jacky-当然，子组件（现在重命名为折线图）是折线图组件。感谢查看！在子组件的代码中，通过chartData属性从父组件接收数据，但仅在创建时接收，没有绑定关系，因此，当数据来自异步请求时，子组件的chartData值不会更改，除非您使用手表监视更改