Vuetify 3 主题选择器中v-radio-group设置model为null的实现问题

问题分析 #

当前实现的核心问题是每个子组件都单独包含一个<v-radio-group>，导致所有单选按钮不属于同一个组，无法实现互斥选中效果。点击不同主题时，无法自动清空其他未选中的单选按钮，也无法通过统一的v-model管理选中状态。

修复方案 #

要实现单选按钮的互斥效果，必须将<v-radio-group>统一放在父组件中，让所有<v-radio>属于同一个单选组。子组件仅负责渲染单个单选按钮和主题预览色块，选中状态由父组件统一维护。

修改后代码 #

父组件（ThemeSelector.vue）

<template>
  <v-card max-width="800" class="mx-auto">
    <v-container>
      <!-- 统一的单选组，管理所有radio的选中状态 -->
      <v-radio-group v-model="selectedTheme" inline>
        <v-row dense>
          <!-- 遍历所有主题，渲染子组件 -->
          <ThemeItem
            v-for="theme in availableThemes"
            :key="theme"
            :theme-name="theme"
            :value="theme"
          />
        </v-row>
      </v-radio-group>
    </v-container>
  </v-card>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useTheme } from 'vuetify'
import ThemeItem from './ThemeItem.vue'

// 父组件中定义的可用主题列表
const availableThemes = ref(['light', 'dark', 'custom1', 'custom2'])
const vTheme = useTheme()
const selectedTheme = ref(vTheme.global.name.value)

// 监听选中主题变化，同步更新Vuetify全局主题
watch(selectedTheme, (newTheme) => {
  if (newTheme) {
    vTheme.global.name.value = newTheme
    // 可选：若需将model设为null，可添加延迟逻辑
    // setTimeout(() => { selectedTheme.value = null }, 500)
  }
})
</script>

子组件（ThemeItem.vue）

<template>
  <v-col cols="12">
    <!-- 仅保留单个radio，归属父组件的radio-group -->
    <v-radio
      :label="themeName"
      density="compact"
      :value="value"
    />
    <!-- 主题预览色块区域 -->
    <v-row class="mt-2">
      <v-col cols="2" v-for="color in previewColors" :key="color">
        <v-sheet outlined :color="color" rounded :theme="themeName">
          <v-card variant="outlined" :color="color === 'primary' ? 'secondary' : 'primary'">
            &nbsp;
          </v-card>
        </v-sheet>
      </v-col>
    </v-row>
  </v-col>
</template>

<script setup lang="ts">
defineProps({
  themeName: {
    type: String,
    required: true
  },
  value: {
    type: String,
    required: true
  }
})

// 预览的配色方案列表
const previewColors = ['background', 'surface', 'primary', 'secondary', 'error', 'info', 'success', 'warning']
</script>

<style scoped>
.input__details {
  display: none !important;
}
</style>

关键说明 #

• 统一单选组：父组件的<v-radio-group>管理所有子组件的<v-radio>，天然实现互斥选中，点击时自动清空其他未选中项。
• 状态同步：父组件通过watch监听选中状态变化，同步更新Vuetify全局主题，子组件无需处理主题切换逻辑。
• 组件职责分离：子组件仅负责UI渲染，状态由父组件统一控制，代码结构更清晰。
• 可选需求支持：如果需要在选中后将v-radio-group的model设为null，可在父组件的watch中添加延迟设置逻辑（代码中已注释）。

内容的提问来源于stack exchange，提问作者Jamie