cant render multiple charts on v-slider-items inside a v-slider

user_13338848 0
Viewed 170

I'm trying to display multiple charts (from the chart.js library),I want each chart to be in a v-slider-item.

In the beginning I was told my code wasn't working because I was trying to append the chart canvas into the v-slider-item before the DOM element was updated and therefor the v-slider-items weren't rendered, so I executed the chart rendering code inside the this.nextTick()

after doing that the code only renders the first chart inside a v-slider-item and wont render the rest...

heres a link to a codepen that shows the error:not rendering v-slider example

vuejs2 vuetify.js charts javascript
1 Answers

As a quick fix you may add eager prop to your <v-carousel-item> component.

A small explanation:

Your problem is because Vuetify is using lazy loading of its components. So when the page is loaded, only the block with the first chart exists in the DOM. In your code you are trying to get link to your component using document.getElementById(chart.chartName). Unfortunately, it is not possible even with $nextTick method - second or third chart will be loaded only when you change carousel active item.

But eager prop allows you to force load all charts at the moment when this page is loaded (to be more precise, at mounted stage). Please, keep in mind that in production this trick may lead to some performance issues.

Maybe it should be better to you to use framework-oriented library like vue-chartjs.

user_92752240
Related