Passing data from .vue to .js in vuejs

Question

I am doing report through chartjs.

In User.vue

beforeCreate() {
    axios
      .get("/pct-at/api/users")
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => {
      });
  },
  data() {
    return {
      startDate: "",
    };
  },

Result res.data :

{"datasets":[{"label":"User active","data":[2,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}}

In userChart.js

export default {
    lineChart: {
        options: {
            responsive: true,
            maintainAspectRatio: false,
            backgroundColor: false,
            hover: {
                mode: 'label',
            },
        },
        data: data // I want to get data from User.vue here : data
    },
}

Now I want in user.js to receive data in res.data from User.vue, how should I do that? Thanks

Answer 1

The best way to do this is to fetch data via axios call in userChart.js itself.

If you want to communicate between components, you can use custom events and props, event bus or mitt.

Specifically for chart.js, please follow the official guide here.