无法在 v-slider 内的 v-slider-items 上呈现多个图表
cant render multiple charts on v-slider-items inside a v-slider
我正在尝试显示多个图表（来自 chart.js 库），我希望每个图表都在 v-slider-item.
中
一开始我被告知我的代码不起作用，因为我试图在更新 DOM 元素之前将图表 canvas 附加到 v-slider-item 中，因此v-slider-items 没有渲染，所以我在 this.nextTick()
中执行了图表渲染代码
这样做之后，代码仅呈现 v-slider-item 内的第一个图表，不会呈现其余部分...
这是一个 link 代码笔，显示错误：not rendering v-slider example
作为快速修复，您可以将 eager 属性添加到 <v-carousel-item> 组件。
一个小小的解释：
你的问题是因为 Vuetify 正在使用其组件的延迟加载。所以当页面加载时，DOM 中只存在 第一个图表 的块。在您的代码中，您试图使用 document.getElementById(chart.chartName) 将 link 获取到您的组件。不幸的是，即使使用 $nextTick 方法也不可能 - 只有当您更改轮播活动项目时才会加载第二个或第三个图表。
但是 eager 属性允许您在加载此页面时强制加载所有图表（更准确地说，在 mounted 阶段）。请记住，在生产中这个技巧可能会导致一些性能问题。
也许你最好使用像 vue-chartjs 这样面向框架的库。
我正在尝试显示多个图表（来自 chart.js 库），我希望每个图表都在 v-slider-item.
一开始我被告知我的代码不起作用，因为我试图在更新 DOM 元素之前将图表 canvas 附加到 v-slider-item 中，因此v-slider-items 没有渲染，所以我在 this.nextTick()
这样做之后，代码仅呈现 v-slider-item 内的第一个图表，不会呈现其余部分...
这是一个 link 代码笔，显示错误：not rendering v-slider example
作为快速修复，您可以将 eager 属性添加到 <v-carousel-item> 组件。
一个小小的解释：
你的问题是因为 Vuetify 正在使用其组件的延迟加载。所以当页面加载时，DOM 中只存在 第一个图表 的块。在您的代码中，您试图使用 document.getElementById(chart.chartName) 将 link 获取到您的组件。不幸的是，即使使用 $nextTick 方法也不可能 - 只有当您更改轮播活动项目时才会加载第二个或第三个图表。
但是 eager 属性允许您在加载此页面时强制加载所有图表（更准确地说，在 mounted 阶段）。请记住，在生产中这个技巧可能会导致一些性能问题。
也许你最好使用像 vue-chartjs 这样面向框架的库。