让 Chartkick 在渲染图表之前等待从 Firebase 填充数据

Question

我在我的 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>

家长：

<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()
  }
}

Answer 1

修改您的 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
  }
}