Question

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

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

这是一个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 />

的伪造的第一个标签

Answer 2

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

要解决您的问题，可以使用为optional定义的<v-tabs>道具，该道具不需要活动的选项卡。如果未选择任何标签，则v-model为undefined：

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

Vuetify取消选择v-tab

2 个答案: