Vue RadioButton组件v-for循环下@update:modelValue事件异常触发问题

问题现象 #

• 使用RadioButtonGroup组件点击单选框时，仅触发1次@update:modelValue事件，符合预期
• 直接用v-for循环渲染RadioButton组件时，点击任意单选框，所有同name属性的RadioButton都会触发@update:modelValue事件

问题原因 #

你的怀疑方向完全正确：每个RadioButton实例都通过useField绑定了同一个name字段，当单选框状态变化时会引发连锁反应：

1. 浏览器自动切换同组其他单选框的checked状态
2. 父组件modelValue更新后，所有RadioButton的:checked="modelValue === val"会重新计算，触发每个实例的useField内部状态更新
3. 每个useField实例都会执行handleChange，最终导致所有同组RadioButton都发出update:modelValue事件

另外，RadioButton未手动实现v-model的update:modelValue发射逻辑，依赖useField内部逻辑进一步加剧了事件触发的混乱。

修复方案 #

1. 重构RadioButton组件，剥离校验逻辑 #

让RadioButton仅负责UI展示和基础v-model交互，把校验逻辑上移到父容器：

<template>
    <label
        :for="id"
        class="elab-ui-radio">
        <input
            :id="id"
            type="radio"
            :name="name"
            :value="val"
            ref="radio"
            :checked="modelValue === val"
            :disabled="disabled"
            @change="onChange"
        />
        {{ label }}
    </label>
</template>
<script lang="ts" setup>
const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    name: {
        type: String,
        default: ''
    },
    modelValue: {
        type: String
    },
    val: {
        type: String,
        default: ''
    },
    id: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        required: false,
        default: false
    }
});

const emit = defineEmits(['update:modelValue']);

const onChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.checked) {
        emit('update:modelValue', target.value);
    }
};
</script>

2. 单独使用RadioButton时，在父容器统一处理校验 #

用v-for渲染单选框组时，在父组件中通过useField统一管理整个组的校验，避免每个单选框单独绑定：

<Form class="custom-radio-form">
    <h4>{{state.label}}</h4>
    <div
        class="custom-radio-wrapper"
        v-for="(option, key) in state.options"
        :key="option.value" >
        <RadioButton
            :label="option.label"
            :val="option.value"
            :id="'radio-option-' + option.label"
            name="custom-radio-group"
            :disabled="state.disabled"
            v-model="state.modelValue"
        />
    </div>
    <ErrorMessage name="custom-radio-group" as="div"/>
    <p>Model value: {{ state.modelValue }}</p>
</Form>

<script lang="ts" setup>
import { useField } from 'vee-validate';
import { toRefs } from 'vue';

const props = defineProps({
    state: {
        type: Object,
        required: true
    }
});

const { state } = props;
const fieldName = 'custom-radio-group';
const fieldRules = state.required ? 'required' : '';

useField(fieldName, fieldRules, {
    validateOnMount: state.validateOnMount
});
</script>

3. 保留RadioButtonGroup现有逻辑 #

RadioButtonGroup的设计是合理的：在父层统一用useField处理校验，再把value传递给子单选框，整个组只有一个校验实例，不会出现批量触发事件的问题，无需修改。

关键优化点 #

• 单选框组的校验必须在父容器统一处理，符合vee-validate的设计思路，避免同名字段的多校验实例冲突
• 用@change替代@click触发事件，单选框的状态变化在change事件中才是可靠的，click可能在状态未真正变更时触发
• 手动实现update:modelValue的发射逻辑，明确控制事件触发时机，避免依赖第三方库内部逻辑导致的不可预期行为

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