v-slider的v-slider-item中无法渲染多个chart.js图表问题求助

• vuetify的v-slider轮播组件默认采用懒加载渲染机制：仅当前处于激活态的滑块项会被挂载到真实DOM树中，其余未激活的v-slider-item的DOM节点不会被插入页面，因此全局nextTick触发时只能获取到第一个滑块项的canvas元素，其余项的canvas不存在，图表初始化自然失败。

方案1：关闭组件懒加载（最简单） #

直接给v-slider组件添加eager属性，强制所有v-slider-item在组件初始化时就全部渲染到DOM中，此时再在nextTick中批量初始化所有图表即可正常识别所有canvas节点。
示例代码片段：

<v-slider eager>
  <v-slider-item v-for="(chartConfig, index) in chartList" :key="index">
    <canvas :ref="el => { if (el) canvasRefs[index] = el }"></canvas>
  </v-slider-item>
</v-slider>

export default {
  data() {
    return {
      chartList: [], // 你的所有图表配置数组
      canvasRefs: [],
      chartInstances: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.canvasRefs.forEach((canvas, index) => {
        this.chartInstances[index] = new Chart(canvas, this.chartList[index])
      })
    })
  }
}

方案2：监听滑块切换事件延迟初始化 #

如果不想关闭懒加载、想要降低首次渲染压力，可以监听v-slider的change事件，在滑块切换到对应项的时候再初始化对应位置的图表，避免提前访问不存在的DOM。
示例代码片段：

methods: {
  // 绑定到v-slider的@change事件
  onSliderChange(activeIndex) {
    // 只初始化未渲染过的图表，避免重复实例化
    if (!this.chartInstances[activeIndex]) {
      this.$nextTick(() => {
        const canvas = this.canvasRefs[activeIndex]
        this.chartInstances[activeIndex] = new Chart(canvas, this.chartList[activeIndex])
      })
    }
  }
}

• 不要用固定ID选择canvas元素，循环生成的元素ID重复会导致只能拿到第一个匹配节点，建议用数组式ref存储每个canvas的引用
• 组件销毁前要调用每个chart实例的destroy()方法，避免内存泄漏

内容的提问来源于stack exchange，提问作者leon100