Vue3 Options API下如何取消radio button的选中状态

核心问题点 #

1. 计算属性无限递归：compPropsVModelCodeDE的getter返回自身，导致栈溢出，同时错误引用了未定义的compPropsVModelSentinelHub变量。
2. Radio按钮配置错误：value属性绑定了vModel变量，导致选中逻辑混乱；@input事件传递的是target.value而非选中状态。
3. 不必要的$nextTick：直接赋值即可触发响应式更新，无需延迟。

修正步骤 #

1. 修复计算属性

将getter改为返回props中的vModelProcessingEnginCodeDE，移除错误变量引用：

computed: {
    compPropsVModelCodeDE: {
        get() {
            return this.vModelProcessingEnginCodeDE;
        },
        set(value) {
            this.$emit('update:vModelProcessingEnginCodeDE', value);
        },
    },
},

2. 修正Radio输入框配置

• value设为固定标识值（如true），明确选中时的对应值
• @input改为传递target.checked，确保父组件接收正确的选中状态

<input
    type="radio"
    :value="true"
    @input="$emit('update:vModelProcessingEnginCodeDE', $event.target.checked)"
    :disabled="isRadioButtonCodeDEDisabled"
    :checked="compPropsVModelCodeDE"
    @change="onCodeDESelected()"
/>

3. 简化Watch监听

移除$nextTick，直接赋值；若injCheckStateOfSatDataProcessingEnginesRadioBtns是Ref类型，可直接监听：

watch: {
    injCheckStateOfSatDataProcessingEnginesRadioBtns(newVal) {
        console.log('#####newVal:', newVal)
        if (!newVal) {
            this.compPropsVModelCodeDE = false;
        }
    },
},

若注入的是带value属性的对象，保持监听'injCheckStateOfSatDataProcessingEnginesRadioBtns.value'即可，核心是直接赋值无需延迟。

4. 优化Props类型（可选）

为vModelProcessingEnginCodeDE指定布尔类型与默认值，增强类型校验：

props: {
    // ...其他props
    vModelProcessingEnginCodeDE: {
        type: Boolean,
        default: false,
    },
},

完整修正后的代码片段 #

<template>
    <cds-radio id="idRadioButtonCodeDEContainer">
        <label>{{ tempTextCodeDE }}</label>
        <input
            type="radio"
            :value="true"
            @input="$emit('update:vModelProcessingEnginCodeDE', $event.target.checked)"
            :disabled="isRadioButtonCodeDEDisabled"
            :checked="compPropsVModelCodeDE"
            @change="onCodeDESelected()"
        />
    </cds-radio>
</template>

<script>
import { InjectionKeys } from '../../../../map/assets/System/InjectionKeys.js';
export default {
    name: 'RadioButtonCodeDE',
    data() {
        return {};
    },
    components: {},
    props: {
        tempTextCodeDE: {
            type: String,
            default: 'ProcessingEngines',
        },
        vModelProcessingEnginCodeDE: {
            type: Boolean,
            default: false,
        },
        isRadioButtonCodeDEDisabled: {
            type: Boolean,
            default: true,
        },
    },
    inject: {
        injCheckStateOfSatDataProcessingEnginesRadioBtns: { from: InjectionKeys.PROVIDE_KEY_CHECK_STATE_OF_SAT_DATA_PROCESSING_ENGINES_RADIO_BUTTONS.description },
    },
    emits: {
        'update:vModelProcessingEnginCodeDE': null,
    },
    watch: {
        injCheckStateOfSatDataProcessingEnginesRadioBtns(newVal) {
            console.log('#####newVal:', newVal)
            if (!newVal) {
                this.compPropsVModelCodeDE = false;
            }
        },
    },
    computed: {
        compPropsVModelCodeDE: {
            get() {
                return this.vModelProcessingEnginCodeDE;
            },
            set(value) {
                this.$emit('update:vModelProcessingEnginCodeDE', value);
            },
        },
    },
    methods: {
        onCodeDESelected() {
            console.log('onCodeDESelected');
        },
    },
};
</script>

<style>
    @import '../../../../map/assets/css/radioButtonCodeDEContainer.css';
</style>

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