在vue项目中使用element-ui需要根据后台数据动态加载el-tabs，请问如何在每次进入页面时自动跳转到第一个页面？

Question

附上代码
<template>

<div class="ups">
    <el-tabs v-model="editableTabsValue" type="card" @tab-click="show_upsPage" class="sub">
        <el-tab-pane :key="item.name"
                     v-for="item in editableTabs"
                     :label="item.title"
                     :name="item.name">
            <upsPage v-if="item.active"></upsPage>
        </el-tab-pane>
    </el-tabs>
</div>

</template>

<script>
// import { getList } from '@/api/table'
import UpsPage from '@/views/table/UPS/UpsPage/'

export default {

components: {
  upsPage: UpsPage
},
name: 'UPS',
data() {
  return {
    editableTabsValue: 'A',
    editableTabs: []
  }
},
methods: {
  show_upsPage(event) {
    // var _this = this
    console.log(this.editableTabs)
    this.editableTabs.forEach(function(item) {
      if (item.name === event.name) {
        item.active = true
      } else {
        item.active = false
      }
    })
  }
},
created: function() {
  this.$store.dispatch('upsNumber').then((res) => {
    this.editableTabs = res.data
  }).catch(() => {
  })
  console.log(this.editableTabs)
}

}
</script>

子组件的渲染是通过v-if进行的，而渲染的子组件是需要和item.name进行对应的，由于v-if中的变量名item.active并不是多个，所以需要关联item.name进行单独判断，由此达到后台有多少个数据就能渲染多少个子组件的目的，求各路大神支招。

Answer 1

获取完数据后设置editableTabsValue的值为索引0的name不就行了

Answer 2

想问一下你这个是怎么切换显示的 用一个组件的话 有没有完整的代码啊