vue-chartjs 带方法参数的图表更新按钮需要多次点击

Question

我试图通过将所选图表的 ID 发送到 fillData 方法来允许用户显示不同的图表。代码存在几个问题。加载图表后，需要单击两次其他按钮才能加载新图表，即使通过 get 方法成功检索了数据也是如此。页面加载后，如果我单击任一按钮，图表 1 将加载。

这里是主要成分：

<template>
  <div class="small">
    <line-chart :chart-data="datacollection"></line-chart>
    <button @click="fillData(1)">Chart 1</button>
    <button @click="fillData(2)">Chart 2</button>
  </div>
</template>

<script>
  import LineChart from './ResultsChart.vue'

  export default {
    components: {
      LineChart
    },
    props: ['id'],
    data () {
      return {
        datacollection: null
      }
    },
    mounted (id) {

      this.fillData(id)
    },
    computed: {
    chartData: function() {
      return this.data;
    }
  },
    methods: {
      fillData (id=1) {

        this.datacollection = {
          labels: this.getDates(id),
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: this.getData(id)
            }
          ]
        }
        },

      getDates: function(id){
              axios.get('api/get_dates/' + id)
              .then(function (response) {
                 this.dates = response.data;
              }.bind(this));
              return this.dates;
            },
      getData: function(id){
              axios.get('api/get_results/' + id)
              .then(function (response) {
                 this.rdata = response.data;
              }.bind(this));
              return this.rdata;
            },     
      getStudents: function(){
              axios.get('/get_students')
              .then(function (response) {
                 this.students = response.data;
              }.bind(this));
              return students;
            },
      getCharts: function(){
              axios.get('/get_charts')
              .then(function (response) {
                 this.charts = response.data;
              }.bind(this));
              return charts;
            }, 

    }
  }
</script>

<style>
  .small {
    max-width: 600px;
    margin:  150px auto;
  }
</style>

和 Mixin：

<script>
  import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options','chartData'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart( this.options)
  }
}

</script>

感谢任何帮助。谢谢

Answer 1

经过多次尝试后，我找到了一个似乎可行的解决方案。我是 Chartjs 和 Vue 的新手，所以我不知道这是否是最佳实践。我将 axios get 请求移到 fillData 函数中，并更新了 axios 请求回调中的数据。

<template>
  <div class="small">
    <line-chart :chart-data="datacollection"></line-chart>
    <button v-model="chart_id" :value=1 @click="fillData(1)">Chart 1</button>
    <button v-model="chart_id" value=2 @click="fillData(2)">Chart 2</button>
  </div>
</template>

<script>
  import LineChart from './ResultsChart.vue'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {

      this.fillData()
    },

    methods: {

      fillData (id=1) {
          axios.get('api/get_dates/' + id)
              .then(function (response) {
                 this.dates = response.data;

              axios.get('api/get_results/' + id)
              .then(function (response) {
                 this.rdata = response.data; 
                 this.datacollection = {
          labels: this.dates,
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: this.rdata,

            }
          ]
        }
               }.bind(this))



              }.bind(this));

        },


    }
  }
</script>

vue-chartjs 带方法参数的图表更新按钮需要多次点击

Vue-chartjs chart update button with method parameter requires multiple clicks

button

vue.js

vue-chartjs