Vue chart.js在加載時不顯示數據

Question

我在vue-chartjs使用vue-chartjs ，但有一個問題，即在加載時未加載數據。 但是當我在圖例上單擊3倍時，數據就會顯示出來。

這是gif： https : //gfycat.com/gifs/detail/SimilarShockedAffenpinscher

我的代碼：

<template>
    <Chart :chartData="this.data" :width="800" :height="500"></Chart>
</template>
<script>
    import Chart from './Chart.vue';

    export default {
      name: 'home',
      components: {
        Chart
      },
      data() {
        return {
            data: {},
            weights: [],
            dates: []
        }
      },
      mounted () {
        this.render()
      },
      methods: {
        render() {
            self = this
            axios.get('/api/data')
              .then(function (response) {
                for (var i = 0; i < response.data.data.length; i++) {
                    self.weights.push(response.data.data[i].kg)
                    self.dates.push(response.data.data[i].created_at)
                }
                console.log(response)
              })
              .catch(function (error) {

                console.log(error);
              });
            // Overwriting base render method with actual data.
          self.data = {
            labels: self.dates,
            datasets: [
              {
                label: 'Data One',
                data: self.weights,
              }
            ]
          }
        }
      }
    }
</script>

Chart.vue：

<script>
    import VueCharts from 'vue-chartjs'
    import { Bar, Line, mixins } from 'vue-chartjs'
    import moment from 'moment'
    import axios from 'axios'
    export default {
      extends: Bar,
      mixins: [mixins.reactiveProp],
      props: ['chartData', 'options'],
      data() {
        return {

        }
      },
      mounted () {
        this.renderChart(this.chartData, this.options)
      },
      methods: {
      }
    }
</script>

Answer 1

我懷疑這是您的問題：

  self.data = {
        labels: self.dates,
        datasets: [
          {
            label: 'Data One',
            data: self.weights,
          }
        ]
      }

自我引用了這個，所以self.data = this.data。 它直接分配給您的組件數據屬性。