vue.js tab页切换

<template>
  <div>
    <div class="tabs">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :class="{ active: activeTab === index }"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tab-content">
      <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: 'Tab 1', content: 'Content of Tab 1' },
        { name: 'Tab 2', content: 'Content of Tab 2' },
        { name: 'Tab 3', content: 'Content of Tab 3' }
      ]
    };
  }
};
</script>

<style>
.tabs button.active {
  background-color: #ddd;
}
.tab-content div {
  display: none;
}
.tab-content div[v-show="true"] {
  display: block;
}
</style>

this.$forceUpdate();

<template>
  <div v-if="tab.loaded">{{ tab.content }}</div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab 1', content: '', loaded: false },
        // ...其他标签
      ]
    };
  },
  methods: {
    async loadTabContent(index) {
      const response = await fetch(`/api/tab-content/${index}`);
      this.tabs[index].content = await response.text();
      this.tabs[index].loaded = true;
    }
  }
};
</script>

.tab-content > div {
  padding: 10px;
  border: 1px solid #ccc;
}