vue tab 中使用echarts

之前vue+tab+echarts使用出现问题时用《 vue+Framework7+echarts时使用tab组件出现的问题 》中的方法解决。

今天用vant时同样遇到了这种问题：第一轮点击时tab中的echarts均正常显示，但是之后再点击，均无数据，无法正常显示。

这次用的方法感觉比之前相对简单方便,先销毁子组件，触发事件产生时再重置：

.vue

    <!--子组件中包含了echarts图标-->
    <van-tabs v-model="active" sticky>
      <van-tab title="tab1">
        <子组件1 v-if="condition1"></子组件1>
      </van-tab>
      <van-tab title="tab2">
        <子组件2 v-if="condition2"></子组件2>
      </van-tab>
    </van-tabs>

.js

//import 子组件1与子组件2

export default {
  data () {
    return {
      active: 0,
      condition1: true,
      condition2: false,
    }
  },
  //监听tab当前显示的页面时哪个
  watch: {
    active (val, oldVal) {
      this.refreshChart(val);
    }
  },
  methods: {
    refreshChart (ele) {
      if (ele == 1) {
        this.$nextTick(() => {
          this.condition2 = true
          this.condition1 = false
        })
      }
      if (ele == 0) {
        this.$nextTick(() => {
          this.condition1= true
          this.condition2 = false
        })
      }
    },
  },
  components: {
    子组件1，子组件2
  },
}