vue echarts 循环渲染报错

Question

问题遇到的现象和发生背景

vue使用组件vuetify组件，在v-carousel标签内循环v-carousel-item，并在标签v-carousel-item内写div，让echarts在里面渲染，结果echarts不显示且控制台报错。

问题相关代码，请勿粘贴截图

<template>
  <!-- display: contents; -->
  <v-carousel
    :show-arrows="false"
    v-model="carouselIndex"
    @change="indexChange"
    style="width: 100%; height: auto"
    light
    hide-delimiter-background
  >
    <v-carousel-item
      :key="item.chartId"
      v-for="(index, item) in chartTypeItems"
      :disabled="true"
      style="height: auto !important"
    >
      <div
        style="width: 100%; height: 300px; margin-top: 20px"
        :id="item.chartId"
      ></div>
    </v-carousel-item>
  </v-carousel>
</template>

运行结果及报错内容

我的解答思路和尝试过的方法

在执行echarts方式外面包一层 this.$nextTick(() => { });

我想要达到的结果

能够成功渲染出图表且切换轮播图时图表也会改变

Answer 1

找不到getAttribute方法，贴代码出来看看。