Vuetify 取消选择 v-tabs

Question

我试图通过代码取消选择 v-tabs 组件，但它总是最终选择第一个选项卡。

当 v-model 设置为 -1 时，它会在初始化时取消选择，但是一旦选择了任何选项卡，似乎就无法取消选择。除了其中一个选项卡之外的任何其他值只会选择第一个选项卡并将索引设置为 0。（v-model 和 value 具有相同的结果）

这是一个 CodePen 示例：https ://codepen.io/arno-van-oordt/pen/qBBbmzY

• 索引从 -1 开始
• 单击任一选项卡栏上的选项卡 2 或 3
• 点击“取消选择”

HTML：

<div id="app">
  <v-app id="inspire">
    tabIndex: {{tabIndex}}
    <v-tabs :value="tabIndex">
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
    <v-tabs v-model="tabIndex">
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
    <v-btn @click="deselect">Deselect</v-btn>
  </v-app>
</div>

JS：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),

  data: {
    tabIndex: -1
  },
  methods: {
    deselect: function() {
      this.tabIndex = -1;
    }
  }
});

这是一个错误还是我在这里遗漏了什么？

Answer 1

第一个选项卡是自动选择的。
解决方法：添加假的第一个选项卡<v-tab class="pa-0 ma-0" style="min-width:0px" />和第一个空选项卡项<v-tab-item />