在循环中使用VuesJS引导4个选项卡-不能返回到第一个选项卡

data() {
  return {
    tabs: [
      { id: 1, title: '选项卡1', content: '选项卡1的内容', active: true },
      { id: 2, title: '选项卡2', content: '选项卡2的内容', active: false },
      { id: 3, title: '选项卡3', content: '选项卡3的内容', active: false },
      { id: 4, title: '选项卡4', content: '选项卡4的内容', active: false }
    ]
  };
}

<div>
  <div v-for="tab in tabs" :key="tab.id" v-show="tab.active">
    <h2>{{ tab.title }}</h2>
    <p>{{ tab.content }}</p>
  </div>
</div>

methods: {
  switchTab(tab) {
    this.tabs.forEach(t => {
      t.active = (t.id === tab.id);
    });
  }
}

<div>
  <div v-for="tab in tabs" :key="tab.id" v-show="tab.active" @click="switchTab(tab)">
    <h2>{{ tab.title }}</h2>
    <p>{{ tab.content }}</p>
  </div>
</div>