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

by

0👍

✅

After much casting about I found a solution that seems to work. I am new to both Chartjs and Vue, so I don’t know if this is best practice. I moved the axios get requests inside the fillData function and updated the data inside the callback of the axios request.

<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>

Leave a comment