Chartjs-VueJS + Chartjs – Chart only renders after code change

2πŸ‘

βœ…

You need to notify the child component to re-render itself.
add a watcher is one way, watch the data change and update it.

Another easier way is, add a key prop to it.

in your App.vue, do like this:

 <LineChart :chart-data="downloads" :chart-labels="labels" :key="downloads.length"/>

here i’m using the downloadsβ€˜s length as key value. it’s a simple and temp resolution to show you how to use key. In your app you should use some other value as key, incase different api call returns same length data.

you can also set the key to another value, and change this value every time you call the api.

Leave a comment