Passing data from flask to echart using axios

Question

I am trying to pass the data I get from the backend to echarts using axios but I am not having much luck. Here is my LineChart.js file

import {Line} from 'vue-chartjs'
import axios from 'axios';
export default {
    extends: Line,
    props: ["data"],
    mounted() {
        this.renderChart(
            {
                labels: [
                    'Jan',
                    'Feb',
                    'March'
                ],
                datasets: [
                    {
                        label: 'Stream',
                        backgroundColor: "#42c9d5",
                        data: []
                    }
                ]
            },
            {responsive: true, maintainApsectRatio: false}
        )
    },
    computed: {
        chartData: function() {
            return this.data;
        }
    },
    methods: {
        getScore() {
            axios({
                method: 'get',
                url: 'http://localhost:5000/time',
              }).then((response) => {
                this.data = response.data.score
                console.log(this.data);
              })
                .catch((error) => {
                // eslint-disable-next-line
                  console.error(error);
                });
        }
    },
    created() {
        this.getScore();
    }
    

}

I can see the output in the console but I am not sure how to pass it to the data: [] in datasets

Answer 1

First you can't mutate a props. So you can't do this.data = .... If you check your browser inspector you will see an error relative to the fact that you can't modify a props.

You have to create a state and change the state when you receive the axios response :

import {Line} from 'vue-chartjs'
import axios from 'axios';
export default {
    extends: Line,
    props: ["data"],
    methods: {
        getScore() {
            axios({
                method: 'get',
                url: 'http://localhost:5000/time',
              }).then((response) => {
              this.renderChart(
              {
                labels: [
                    'Jan',
                    'Feb',
                    'March'
                ],
                datasets: [
                    {
                        label: 'Stream',
                        backgroundColor: "#42c9d5",
                        data:  response.data.score
                    }
                ]
            },
            {responsive: true, maintainApsectRatio: false}
        )
              })
                .catch((error) => {
                // eslint-disable-next-line
                  console.error(error);
                });
        }
    },
    mounted() {
        this.getScore();
    }
}