Estoy tratando de mostrar varios gráficos (de la biblioteca chart.js ), quiero que cada gráfico esté en un v-slider-item .
Al principio me dijeron que mi código no funcionaba porque estaba tratando de agregar el canvas del gráfico en el v-slider-item antes de que se actualizara el elemento DOM y, por lo tanto, los v-slider-items no se representaron, así que ejecuté el código de representación del gráfico dentro de this.nextTick()
después de hacer eso, el código solo muestra el primer gráfico dentro de un v-slider-item y no muestra el resto ...
heres a link to a codepen that shows the error: not rendering v-slider example
Como una solución rápida, puede agregar accesorios ansiosos a su componente <v-carousel-item> .
Una pequeña explicación:
Su problema se debe a que Vuetify está utilizando la carga diferida de sus componentes. Entonces, cuando se carga la página, solo existe el bloque con el primer gráfico en el DOM. En su código, está intentando obtener un enlace a su componente usando document.getElementById(chart.chartName) . Desafortunadamente, no es posible incluso con el método $nextTick : el segundo o el tercer gráfico se cargarán solo cuando cambie el elemento activo del carrusel.
Pero el accesorio entusiasta le permite forzar la carga de todos los gráficos en el momento en que se carga esta página (para ser más precisos, en la etapa montada ). Por favor, tenga en cuenta que en producción este truco puede generar algunos problemas de rendimiento.
Tal vez debería ser mejor para usted usar una biblioteca orientada a marcos como vue-chartjs .