Vue-chartjs load data

Linechart.js

import { Line } from "vue-chartjs"

export default {
  extends: Line,
    mounted () {
      this.renderChart({
        labels: ["1","2","3","4","5","6","7"],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "-sharpF64A32",
            data: [40,30,50,20,60,30,20]
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    }
}

example.vue

<template>
<line-chart :width="370" :height="246"></line-chart>
</template>
<script>
import LineChart from "./vue-chartjs/LineChart"
export default {
components: {
      LineChart
    },
},
    methods:{
      getdata(){
        var user_id = this.getcookies("user_id");
          this.$http.post("http://example.com",{
            //post body
            user_id:user_id
          },{headers:{
            "datatoken":data_token,            
          }}).then((data)=>{
            //success
            //data dataLinechart.jsdata
          })
        }
    }

</script>

suppose the return value of post is an array of data,. What should I do now if I want to assign a value to the data variable in Linechart.js?

Vue.js chart.js

Feb.27,2021

write props in Linechart.js

    props: {
        Data: {
          type: Array,
          default: []
        },
    }

pass data in example.vue

<line-chart 
    :width="370" 
    :height="246"
    :Data="data">
</line-chart>

so Linechart.js can get the array

Previous: Execution method after vue list rendering

Next: How does elementUI's navmenu cycle through different tags in v-for?