vue-chart.js 不显示数据

Question

这是Dijagram.vue（父组件）

<script>
  import { Line } from 'vue-chartjs'
  import config from "../config";
import axios from "axios";

  export default {
    extends: Line,
    props: {
      chartData: {
        type: Array,
        required: true,
      
      },
      chartLabels: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [ {
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: false
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted () {
      this.renderChart({
        labels: this.chartLabels,
        datasets: [
          {
            label: 'downloads',
            borderColor: '#249EBF',
            pointBackgroundColor: 'white',
            borderWidth: 1,
            pointBorderColor: '#249EBF',
            backgroundColor: 'transparent',
            data: this.chartData
          }
        ]
      }, this.options)
    },
  
  }
</script>

这是子组件“DijagramPrikaz.vue”

<template>
  <div class="container">
    <line-chart
      v-if="loaded"
     :chartData="dani"
     :chartLabels="asset"/>
  </div>
</template>

<script>
import LineChart from './Dijagram.vue'
 import config from "../config";
import Navbar from "@/components/Navbar.vue"
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
import router from "../router";

export default {
  name: 'LineChartContainer',
  components: { LineChart },
  
  data: () => ({
    loaded: false,
           dani: [],
  asset: [],
  }),
  async mounted () {
    this.loaded = false
    try {
    axios.get(`${config.serverURL}/api/v1/dijagram`, {headers: {
      'Access-Control-Allow-Origin': '*'}})
 .then(response => {
   this.dani = response.data.map(item => item.dani)
   this.asset = response.data.map(item => item.asset.name)
 })
      this.loaded = true
    } catch (e) {
      console.error(e)
    }
  }
}
</script>

如您所见，数据缺失，标签为默认值。我有臭名昭著的“v-if=loaded”，所以我不知道这是问题还是其他问题（虽然我认为这可能与图表道具有关，但我不知道，因为我是新手).有人问过类似的问题，但据我所知，异步始终是问题所在，我认为我的情况并非如此。谢谢

Answer 1

我找到了问题...最终是异步问题。我只是在 axios 请求之前添加了“await”，它起作用了。

vue-chart.js 不显示数据

vue-chart.js doesn't show data

vue.js

charts

vuejs2

chart.js

vue-chartjs