VueJS3单选框v-model切换计费方式后不更新问题求助

切换月度/年度计费方式后，单选框v-model绑定的check值未更新。formValues是响应式对象，切换计费时能返回正确值，但check的输出始终无变化。尝试用watch或ref解决，但未找到可行方案。

1. 统一状态维护（优先推荐） #

不要把check作为独立变量单独维护，直接将其挂载到formValues中，让它与计费字段联动，避免状态分散导致的同步问题：

<template>
  <!-- 计费方式切换单选框 -->
  <label>
    <input type="radio" v-model="formValues.billingType" value="monthly"> 月度计费
  </label>
  <label>
    <input type="radio" v-model="formValues.billingType" value="yearly"> 年度计费
  </label>

  <!-- 需要动态默认选中的目标单选框 -->
  <label>
    <input type="radio" v-model="formValues.check" value="monthly_option"> 月度专属选项
  </label>
  <label>
    <input type="radio" v-model="formValues.check" value="yearly_option"> 年度专属选项
  </label>
</template>

<script setup>
import { ref, watch } from 'vue'

const formValues = ref({
  billingType: 'monthly',
  check: 'monthly_option' // 初始化默认值
})

// 监听计费方式变化，自动同步check的默认选中值
watch(() => formValues.value.billingType, (newType) => {
  formValues.value.check = newType === 'monthly' ? 'monthly_option' : 'yearly_option'
}, { immediate: true }) // 加上immediate确保组件初始化时也执行一次同步
</script>

2. 单独维护check时用watch强制同步 #

如果必须将check作为独立的ref变量，可通过监听计费字段的变化手动同步值：

<script setup>
import { ref, watch } from 'vue'

const formValues = ref({
  billingType: 'monthly'
})
const check = ref('monthly_option')

// 监听计费方式切换，更新check值
watch(() => formValues.value.billingType, (newType) => {
  check.value = newType === 'monthly' ? 'monthly_option' : 'yearly_option'
}, { immediate: true })
</script>

3. 排查模板绑定细节 #

• 确认目标单选框的value属性是动态匹配计费方式的，不要写死静态值；
• 确保check是用ref/reactive声明的响应式变量，普通JS变量无法触发视图更新。

核心提醒 #

状态分散是这类问题的常见诱因，尽量把关联状态放在同一个响应式对象中，能减少不必要的同步逻辑。使用watch时务必加上immediate: true，否则组件初始化阶段不会执行同步，默认选中状态会出错。

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