Vuetify 取消选择 v-tabs答案

【问题标题】：Vuetify Deselecting v-tabsVuetify 取消选择 v-tabs
【发布时间】：2020-02-09 20:20:00
【问题描述】：

我试图通过代码取消选择 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;
    }
  }
});

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

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

【讨论】：

谢谢！只是在我的情况下似乎可以解决问题。糟糕的是，v-tabs 没有取消选择所有的正常方法。

【解决方案2】：

问题是对于v-tabs 组件，默认选择第一个选项卡（索引为0）。使用我当前使用的 Vuetify 版本（2.2.22），我无法重现您描述的将 v-model 设置为 -1 的初始状态，它仍然选择了第一个选项卡。

要解决您的问题，您可以使用为<v-tabs> 定义的optional 属性，它不需要活动选项卡。未选择选项卡时，v-model 为undefined：

<v-tabs
  optional
  ...
>
  ...
</v-tabs>

【讨论】：

此解决方案有一个可能很烦人的副作用：如果您在同一个选项卡上单击 2 次，它将取消选择该选项卡并且不选择任何内容。这显然会造成糟糕的用户体验，因为什么都没有发生。
好吧，OP 询问了一种取消选择选项卡的方法，这是一种解决方案，尽管是的，这种方法也使用户取消选择成为可能，这可能是不想要的。一种解决方法是检测用户选择并在这种情况下避免这种行为，如果这是您想要的。