Chartjs-Chart data displays on the console.log but not on the page (Using Axios/Vue)

by

1👍

your problem is related to the reactivity fundamentals of VueJS. As you are declaring a local variable in the mounted method and trying to access the property myData on this without declaring it in the component, VueJS will not update the UI.

The way you presented your code, I’ll assume that you are using VueJS3 with the Options API.

To have a reactive component, you need to declare a reactive state. This is usually done before the mounted() method.

export default {
    data() {
        return {
            myData: []
        }
    },
    mounted() {
    ...

Afterward, in your mounted and getData methods, instead of declaring myData, you need to use this.myData. VueJS will take care of the reactivity.

Also, I noticed that you are trying to access the DOM directly. This is not a usual or recommended in VueJS. You should use a bind to make sure your properties are updated correctly.

Leave a comment