robtot's questions

O comportamento esperado é que Tab1 seja selecionado quando Tab3 for fechado usando a marca X. Em vez disso, nenhuma guia é selecionada. Isso é estranho, porque quando reatribuo o tab.value usando o botão exatamente da mesma maneira, ele funciona.

Código ( link do Playground ):

<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>