无法在 v-slider 内的 v-slider-items 上呈现多个图表

Posted 2023-02-16

【中文标题】无法在 v-slider 内的 v-slider-items 上呈现多个图表

【英文标题】：cant render multiple charts on v-slider-items inside a v-slider

【发布时间】：2021-12-23 07:55:31

【问题描述】：

我正在尝试显示多个图表（来自chart.js 库），我希望每个图表都位于v-slider-item 中。

一开始我被告知我的代码不起作用，因为我试图在更新DOM 元素之前将图表canvas 附加到v-slider-item 中，因此v-slider-items 没有呈现，所以我在this.nextTick()中执行了图表渲染代码

执行此操作后，代码仅在 v-slider-item 内呈现第一个图表，而不会呈现其余部分...

这里有一个指向显示错误的 codepen 的链接：not rendering v-slider example

【参考方案1】：

作为一种快速修复，您可以将 eager 属性添加到您的 <v-carousel-item> 组件中。

---

一个小解释：

您的问题是因为 Vuetify 正在使用延迟加载其组件。所以当页面加载时，DOM中只存在第一个图表的块。在您的代码中，您尝试使用document.getElementById(chart.chartName) 获取指向您的组件的链接。不幸的是，即使使用$nextTick 方法也是不可能的 - 只有当您更改轮播活动项目时才会加载第二个或第三个图表。

但 eager 属性允许您在加载此页面时强制加载所有图表（更准确地说，在 mounted 阶段）。请记住，在生产中，这个技巧可能会导致一些性能问题。

也许你最好使用像vue-chartjs这样的面向框架的库。

【讨论】：

好的，非常感谢您的回答，我有几个问题：1）当您说：“只有在您更改轮播活动项目时才会加载第二个或第三个图表”时，您的意思是什么？ 2）即使我使用 vue-chart.js，我不会仍然有同样的问题，<v-carousel-item> 没有加载吗？谢谢

@leon100, 1. 我的意思是您的第二个和第三个图表将仅在轮播活动项目更改时插入到 DOM 中。您在 DOM 中没有元素 - 因此您无法使用 getElementById 获取对它的引用。也许some 的this links 可以更好地解释它。 2. 不幸的是，我不熟悉 vue-chartjs API，我只是假设这个库会更适合你。