<a-form-item
label="发布渠道"
name="releaseChannel"
:rules="[{ required: true, message: '请选择发布渠道' }]"
>
<a-checkbox-group
v-model:value="formState.releaseChannel"
@change="releaseChannelChange"
:options="releaseChannelOptions"
/>
</a-form-item>
<script>
const formState= ref({
releaseChannel: ['1'],
});
// 发布渠道
const releaseChannelOptions = [
{ label: '短信', value: '1' },
{ label: '手机客户端', value: '2' },
];
// 赋值
function releaseChannelChange(value) {
console.log(value);
formState.value.releaseChannel = value;
}
</script>
问题:根据程序代码,默认选中第一个,但想勾选其他选项或者是取消第一个选中时,可以打印出所选数据,但是页面不显示当前已选中
解决:这是因为v-model:value="formState.releaseChannel",使用value后,选中的值不能更改,默认初始选中使用:defaultValue,v-model:defaultValue="formState.releaseChannel",更改之后程序运行正常。