图表没有出现在第二个vuetify v-window上

Question

Plotly不会在第二个v窗口中呈现第二个图表。

我创建了一个反应图表，这是一个vue组件。

如果我选择第一个窗口项，则会创建一个图表。 但其他窗口不会创建图表。

我正在尝试一些如何创建不同的图表ID，但可以在vuetify文档中找到如何做到这一点。

<template>
  <div class="container-fluid fill-height">
    <div class="row">
      <v-toolbar dense>
        <v-icon>home</v-icon>
        <v-toolbar-title>Back Test</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
          <v-btn v-if="loaded" flat large @click="loadTable">Table</v-btn>
            <v-btn v-if="loaded" flat large @click="loadChart">Chart</v-btn>
            <v-overflow-btn
              class="p-0"
              v-model="ticker"
              :items="tickers"
              label="Select"
              hide-details/>
        </v-toolbar-items>
      </v-toolbar>
    </div>
    <div class="row fill-height" v-if="loaded">
        <v-card v-if="showChart" color="grey" dark flat tile>
          <v-window v-model="onboarding">
            <v-window-item
              v-for="n in length"
              :key="`card-${n}`">
              <v-card color="transparent">
                <reactive-chart :propData="chartData" divId="myChart"/>
              </v-card>
            </v-window-item>
          </v-window>

          <v-card-actions class="justify-space-between">
            <v-btn flat @click="prev">
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
            <v-item-group v-model="onboarding" class="text-xs-center" mandatory>
              <v-item
                v-for="n in length"
                :key="`btn-${n}`">
                <v-btn
                  slot-scope="{ active, toggle }"
                  :input-value="active"
                  icon
                  @click="toggle">
                  <v-icon>mdi-record</v-icon>
                </v-btn>
              </v-item>
            </v-item-group>
            <v-btn flat @click="next">
              <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cot',
  components: {
    'reactive-chart': ReactiveChart,
  },
  data() {
    return {
      showTable: false,
      showChart: false,
      loaded: false,
      chartData: null,
      epsAnnualBarChart: {
        data: [{
          x: ['2012', '2013', '2014', '2015', '2016'],
          y: [10.00, 15.00, 11.00, 12.00, 13.00],
          type: 'bar',
          name: 'Actual eps',
          marker: {
            color: 'rgb(255,0,0)',
            opacity: 0.5
          }
        }, {
          x: ['2012', '2013', '2014', '2015', '2016'],
          y: [11.00, 14.00, 10.90, 12.10, 13.10],
          type: 'bar',
          name: 'Estimates eps',
          marker: {
            color: 'rgb(0,0,255)',
            opacity: 0.5
          }
        }],
        layout: {
          title: 'EPS estimates and actual',
          xaxis: {
            tickangle: -45
          },
          barmode: 'group'
        },
        config: { responsive: false }
      },
      revAnnualBarChart: {
        data: [{
          x: ['2012', '2013', '2014', '2015', '2016'],
          y: [1000.00, 1050.00, 1100.00, 1200.00, 1300.00],
          type: 'bar',
          name: 'Actual revenue',
          marker: {
            color: 'rgb(255,0,0)',
            opacity: 0.5
          }
        }, {
          x: ['2012', '2013', '2014', '2015', '2016'],
          y: [1010.00, 1040.00, 1090.00, 1210.00, 1310.00],
          type: 'bar',
          name: 'Estimates revenue',
          marker: {
            color: 'rgb(0,0,255)',
            opacity: 0.5
          }
        }],
        layout: {
          title: 'Annual revenue, estimates and actual',
          xaxis: {
            tickangle: -45
          },
          barmode: 'group'
        },
        config: { responsive: false }
      },
      length: 5,
      onboarding: 0
    }
  },
  watch: {
    onboarding() {
      this.updateChartData()
    }
  },
  methods: {
    loadChart () {
      this.showTable = false
      this.showChart = true
    },
    loadTable () {
      this.showChart = false
      this.showTable = true
    },
    next () {
      this.onboarding = this.onboarding + 1 === this.length ? 0 : this.onboarding + 1
    },
    prev () {
      this.onboarding = this.onboarding - 1 < 0 ? this.length - 1 : this.onboarding - 1
    },
    updateChartData () {
      switch (this.onboarding) {
        case 0:
          this.chartData = this.revAnnualBarChart
          break
        case 1:
          this.chartData = this.epsAnnualBarChart
          break
      }
    }
  }
}
</script>

<template>
  <div
    class="reactiveChart"
    ref="container"
    :id='divId'/>
</template>

<script>
import Plotly from 'plotly.js-dist'
export default {
  name: 'reactiveChart',
  props: {
    propData: {
      type: Object,
      required: true
    },
    divId: {
      type: String,
      required: true
    }
  },
  mounted () {
    this.newPlot()
  },
  watch: {
    propData () {
      this.update()
    }
  },
  methods: {
    newPlot () {
      Plotly.newPlot(this.divId, this.propData.data, this.propData.layout, this.propData.config)
    },
    update () {
      console.log(this.divId)
      Plotly.react(this.divId, this.propData.data, this.propData.layout, this.propData.config)
    }
  }
}
</script>```


When i pressing second circle or next Second window does not create chart.