在v-tab中使用v-radio

发布于 2025-01-31 15:37:48 字数 368 浏览 0 评论 0原文

我想在v-tab内使用v-radio，然后在选项卡时选择它
但是问题是我不知道如何在没有v-radio-group的情况下选择单个v-radio，因为我有v-for和我的v-tabs样式与之突破
v-radio 中使用v-Model

我尝试在href =“ https://codepen.io/somethinglike/pen/qwqqvnv” rel =“ nofollow noreferrer”> codepen 如果您会在哪里看到问题，如果您会在哪里看到v-radio group line

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

城歌 2025-02-07 15:37:48

如果我理解您正确地尝试用v-Radio-group将v-tabs：

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

If I understood you correctly try to wrap v-tabs with v-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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

回复收藏 0 原文

~没有更多了~