vue.js - vue-chart.js ：数据可作为计算属性使用，但未显示在图表中

Question

数据在计算属性中可用（见屏幕截图），但不会呈现到 PieChart 控件中。

有人知道为什么吗？

代码 ：

<script>
import { Pie } from 'vue-chartjs'
import * as types from '../store/mutationtypes'
import { mapGetters, mapActions } from 'vuex'

export default Pie.extend({
  mounted () {
    statOrderStatus : this.$store.dispatch('getStatisticsForOrderStatus'),
    this.renderChart({
    labels: this.orderStatusChartKeys,
      datasets: [
        {
          label: 'Ticketstatus',
          backgroundColor: '#f87979',
          data: this.orderStatusChartData
        }
      ]
    })

  },
  computed: {
    ...mapGetters(["statOrderStatus"]),
    orderStatusChartData () {
      let chartData = []
      this.statOrderStatus.forEach(function(orderStatus) {
          chartData.push(orderStatus.doc_count)
      })      
      return chartData
    },
    orderStatusChartKeys () {
      let chartKeys = []
      this.statOrderStatus.forEach(function(orderStatus) {
          chartKeys.push(orderStatus.key)
      })      
      return chartKeys
    }
  }
})
</script>

VUE 信息：（Chrome 调试）

Answer 1

尝试创建一个计算属性来计算图表数据：

看看https://www.webpackbin.com/bins/-KpNBtUKQ67-jSFRHtNechart.js _

datasets: [
        {
          label: 'Ticketstatus',
          backgroundColor: '#f87979',
          data: this.orderStatusChartData
        }

.

computed: {
    orderStatusChartData () {
      let chartData = []
      this.statOrderstatus.forEach(function(orderStatus) {
          chartData.push(orderStatus.doc_count)
      })      
      return chartData
    }