在v-tab内使用v-radio



我想在v-tab中使用v-radio,并在选项卡选择
时选择它,但问题是我不知道如何在没有v-radio-group的情况下选择单个v-radio,因为我有v-for和我的v-tabs样式与它断开
我尝试在v-radio中使用v-model,但它对v-radio选择

没有任何影响乌利希期刊指南: codepen的链接,如果你取消v-radio-group lines的注释,你可以看到问题所在

如果我理解正确,请尝试将v-tabsv-radio-group:

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
selectedFilterTypeIndex: 0
}
}
})
.v-input--selection-controls.v-input {
flex: auto !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-card>
<v-toolbar tile  dense color="blue-grey darken-2">
<template v-slot:extension>
<v-radio-group grow v-model="selectedFilterTypeIndex">
<v-tabs grow dark   background-color="transparent"
slider-size="3" slider-color="yellow"
v-model="selectedFilterTypeIndex"
>
<v-tab :key="index" v-for="(name, index) in ['item1', 'item2']">
<v-radio :label="name" :value="index"   />
</v-tab>
</v-tabs>
</v-radio-group>
</template>
</v-toolbar>
</v-card>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

最新更新