我试图通过代码取消选择v-tabs组件,但最终总是选择第一个选项卡。
当v-model设置为-1时,它将在初始化时取消选择,但是一旦选择了任何选项卡,似乎就无法取消选择。除了其中一个标签外,其他任何值都只会选择第一个标签并将索引设置为0。(v模型和值的结果相同)
这是一个CodePen示例:https ://codepen.io/arno-van-oordt/pen/qBBbmzY
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;
}
}
});
这是一个错误还是我在这里错过了一些东西?
自动选择第一个标签。
解决方法:添加伪造的第一个选项卡<v-tab class="pa-0 ma-0" style="min-width:0px" />
和第一个空选项卡项<v-tab-item />
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句