ant-design-vue a-radio 默认值与反显-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36987708/article/details/116064368

在使用Ant Design Vue的Radio组件时，遇到默认值选中及表单修改时反显的问题。解决关键在于：默认值需为number类型，如`:value="1"`。缺少`:`会导致默认值无法生效，同时也影响到数据的动态更新和反显。这暴露了基础不牢固的问题，提示需要复习Vue基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

radio

基本用法：

<template>
  <div>
    <a-radio-group v-model="value" @change="onChange">
      <a-radio :value="1">
        A
      </a-radio>
      <a-radio :value="2">
        B
      </a-radio>
      <a-radio :value="3">
        C
      </a-radio>
      <a-radio :value="4">
        D
      </a-radio>
    </a-radio-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 1,
    };
  },
  methods: {
    onChange(e) {
      console.log('radio checked', e.target.value);
    },
  },
};
</script>

注意问题

最近做个表单，radio默认值能选中，但是修改时反显不了，能反显了默认值又不起效果了，最后认真看了下文档，发现默认值需要是number类型！！！！！

<!--  html -->
<a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 12 }"
      >
    <a-form-model-item label="level" prop="level">
        <a-radio-group v-model="form.level" @change="change">
            <a-radio :value="1">A</a-radio>
            <a-radio :value="2">B</a-radio>
        </a-radio-group>
    </a-form-model-item>
</a-form-model>

/** data */
data() {
    return {
      form: {  //表单
        level: 1,  // 一开始我写成'1'了，新增时A选中不了，但修改时能反显
      }, 
    }
},
methods: {
    change(e){
      if(e.target.value =='1'){  // e.target.value是number类型，一开始我写成e.target.value ==='1'，条件语句错误
      }
    },
}

注意，:value="1"，value前有个":"，一开始我也忘记写了，然后默认值选中不了，修改时反显不了。

说明基础真是太差了，需要重新学习啊！

:value="1"是 v-bind:value="1"的缩写，动态更新数据