Vue3 computed getters/setters 实现单选按钮状态更新问题问询

你的代码存在3个核心问题，导致单选交互无法正常运行：

• 单选输入框未绑定value属性，v-model无法识别每个选项对应的唯一标识，选中时无法拿到正确的更新值
• 计算属性radio的逻辑不符合单选交互要求：getter直接返回整个propData响应式引用，没有返回当前选中项的值；setter直接透传输入值，没有实现「其余选项取消选中、当前点击项选中」的状态更新逻辑
• 模板遍历数据源和你给出的实际数据结构不匹配：你提供的propData本身是选项数组，但模板中写的是遍历propData.options，运行时会直接抛出属性不存在的错误

注意：Vue3 中 props 为只读状态，所有更新逻辑要么通过 emit 通知父组件修改，要么直接提交 Vuex mutation 更新，禁止直接修改 props 内部属性，否则会触发只读警告。

首先修正模板部分，补全单选框的value绑定，修正遍历数据源：

<template>
    <div v-for="(option, id) in propData" :key="id">
        <label>
            <!-- 绑定每个选项的value作为单选匹配标识 -->
            <input type="radio" v-model="selectedRadio" :value="option.value" />
            <span>{{ option.text }}</span>
        </label>
    </div>
</template>

然后修正script部分的计算属性逻辑，支持emit更新或直接同步Vuex：

<script setup>
import { defineProps, toRefs, defineEmits, computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const props = defineProps({
    // 你给出的实际数据是数组类型，这里修正类型定义
    propData: {
        type: Array,
        required: true
    }
});
const { propData } = toRefs(props);
const emit = defineEmits(['update:propData']);

const selectedRadio = computed({
    get() {
        // 查找当前已选中的选项，返回它的value供v-model匹配
        const currentSelected = propData.value.find(item => item.selected);
        return currentSelected?.value;
    },
    set(newSelectedValue) {
        // 遍历所有选项，仅当前选中的项selected设为true，其余全部设为false
        const updatedList = propData.value.map(option => ({
            ...option,
            selected: option.value === newSelectedValue
        }));

        // 二选一：如果是父组件传递的prop，通过emit通知父组件更新
        emit('update:propData', updatedList);

        // 二选一：如果直接同步Vuex store，替换为你项目里的mutation提交逻辑即可
        // store.commit('form/updateRadioOptions', updatedList);
    }
});
</script>

如果你的实际propData是对象结构、选项数组存放在propData.options字段下，只需要做两处调整即可，核心逻辑不变：

• 模板中遍历源改回propData.options
• 计算属性的get、set中所有操作propData.value的位置，替换为propData.value.options

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