setInterval循环el-tab切换显示

Question

问题描述

el-tab自动循环切换显示

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>

<div class="groupChart">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="AAA" name="first" :key="'first'">
            <span v-if="isUpdate1">AAA</span>
        </el-tab-pane>
        <el-tab-pane label="BBB" name="second" :key="'second'">
            <span v-if="isUpdate2">BBB</span>
        </el-tab-pane>
    </el-tabs>
</div>

</template>

<script>

export default {
  name: 'tabCircle',
  data () {
    return {
      activeName: 'first',
      isUpdate1: true,
      isUpdate2: false,
      cir: null
    }
  },
  methods: {
    handleClick (tab) {
      if (tab.name === 'first') {
        this.isUpdate1 = true
        this.isUpdate2 = false
      } else if (tab.name === 'second') {
        this.isUpdate1 = false
        this.isUpdate2 = true
      }
    }
  },
  mounted () {
    let count = 0
    clearInterval(this.cir)
    this.cir = setInterval(function () {
      let arr = ['first', 'second']
      // let count = 0
      console.log(count, '00000')
      this.handleClick(arr[count])
      count++
      if (count > arr.length-1) {
        count = 0
      }
    }.bind(this), 5000)
  }
}

</script>

你期待的结果是什么？实际看到的错误信息又是什么？

能够自动切换tab显示对应的内容

Answer 1

定时器中
this.handleClick(arr[count])
你传入的是一个字符串.

handleClick (tab) {
      //这里接受的是一个对象?
      if (tab.name === 'first') {
        this.isUpdate1 = true
        this.isUpdate2 = false
      } else if (tab.name === 'second') {
        this.isUpdate1 = false
        this.isUpdate2 = true
      }
    }