Vue.js Element UI 单选框赋值后未选中问题及解决方案

在使用 Vue.js 和 Element UI 构建表单时，经常会遇到单选框赋值后未选中状态的问题。这通常是由于代码中的一些细节导致的。

问题描述

formData.publishStatus = versionItem.publishStatus;//发布时间

const publishStatus: DicDataPageVO[] = reactive([]);
const publishType: DicDataPageVO[] = reactive([]);
const formData = reactive<VersionForm>({
    versionId: null,
    publishStatus: '',
    publishType: '',
});
               <el-form-item label='升级方式' prop='publishType'>
                    <el-radio-group v-model='formData.publishType'>
                        <el-radio :label=''0'' value='0'>强制更新</el-radio>
                        <el-radio :label=''1'' value='1'>非强制提醒</el-radio>
                        <el-radio :label=''2'' value='2'>非强制不提醒</el-radio>
                    </el-radio-group>
                </el-form-item>

在修改表单中，赋值之后得到了值，但是并未选中对应的单选状态，为什么？怎么改?单选框还是没有被选中的样子?

问题原因及解决方案

根据提供的代码，问题可能出现在以下几个地方：

表单初始化顺序: 在表单初始化时，formData应该在publishStatus和publishType之前进行定义，否则在给publishStatus和publishType赋值时，formData可能还未定义，导致无法正确赋值。
el-radio的value属性: 在模板中，el-radio的value属性应该与v-model绑定的属性值一致，即'0'、'1'、'2'，而不是0、1、2。修改为value=''0''、value=''1''、value=''2''。

修正后的代码

const formData = reactive<VersionForm>({
    versionId: null,
    publishStatus: '',
    publishType: '',
});

const publishStatus: DicDataPageVO[] = reactive([]);
const publishType: DicDataPageVO[] = reactive([]);

<el-form-item label='升级方式' prop='publishType'>
    <el-radio-group v-model='formData.publishType'>
        <el-radio :label=''0'' value=''0''>强制更新</el-radio>
        <el-radio :label=''1'' value=''1''>非强制提醒</el-radio>
        <el-radio :label=''2'' value=''2''>非强制不提醒</el-radio>
    </el-radio-group>
</el-form-item>

// 在赋值之前先定义formData
formData.publishStatus = versionItem.publishStatus;
formData.publishType = versionItem.publishType;

总结

为了确保单选框能够正确赋值并选中，请注意以下几点：

确保formData在publishStatus和publishType之前定义。
确保el-radio的value属性与v-model绑定的属性值一致。
确保赋值语句在模板中的el-radio-group之后执行。

通过仔细检查代码细节，并进行必要的修改，就可以解决单选框赋值后未选中状态的问题。