预期的行为是,当使用 X 标记关闭 Tab3 时,应选择 Tab1。相反,不会选择任何选项卡。这很奇怪,因为当我以完全相同的方式使用按钮重新分配 tab.value 时,它就起作用了。
代码(游乐场链接):
<template>
<v-app>
<v-card>
<v-tabs v-model="tab" bg-color="primary">
<v-tab v-for="(t, index) in visibleTabs" :key="t">
{{ t.name }}
<v-icon x-small class="ml-2" @click="hideTab(t)">mdi-close</v-icon>
</v-tab>
</v-tabs>
<v-card-text>
<v-window v-model="tab">
<v-window-item v-for="(t, index) in visibleTabs" :key="t">
{{ t.name }}
</v-window-item>
</v-window>
</v-card-text>
</v-card>
<v-btn @click="selectedTabFirstTab">Select first tab</v-btn>
</v-app>
</template>
<script setup>
import { ref, computed } from 'vue'
const tab = ref(0)
const allTabs = ref([
{ name: 'Tab1', visible: true },
{ name: 'Tab2', visible: true },
{ name: 'Tab3', visible: true },
])
const visibleTabs = computed(() => allTabs.value.filter(tab => tab.visible))
function hideTab(t) {
t.visible = false
// Closing last tab should re-select the first tab
if (t.name == 'Tab3') {
tab.value = 0 // This does not work
}
}
function selectedTabFirstTab() {
tab.value = 0 // This works!
}
</script>