关于使用vue Antd渲染a-radio-group不自动加载的原因及查询过程

关于使用vue Antd渲染a-radio-group不自动加载的原因及查询过程

问题复现

一个单纯的修改页面，把后端的数据渲染到表单中，其他属性都可以渲染，只有渲染单选框时，会出现单选框值仍为空的问题
先看一下初始代码：

		<a-form-item 
          label="报警判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol" >
          <a-radio-group  v-decorator="['isWarning', {rules: [{required: true}]}]">
            <a-radio :value='1'> 是</a-radio>
            <a-radio :value='2'> 否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="推送判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group  v-decorator="['isPush', {rules: [{required: true}]}]" >
            <a-radio :value="1"> 是</a-radio>
            <a-radio :value="2"> 否</a-radio>
          </a-radio-group>
        </a-form-item>

如果是基础的表单属性的话，在加载表单时，这些字段会直接渲染到页面中，我们直接修改即可。但是…这时会发现，我们的Radio依旧为空，初步判断为需要为它设置初始值。
后端的数据也能传输到前端

话不多说，先去官网查看：官网地址
通过官网介绍，我们发现在API文档中，有两个参数都可以设置该数据：defaultValue和value（v-model）

OK，灵感来了，直接开整。。。
在设置两个变量，来存储初始化值，Push和Warning。

		<a-form-item 
          label="报警判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol" >
          <a-radio-group v-model="Warning" v-decorator="['isWarning', {rules: [{required: true}]}]">
            <a-radio :value='1'> 是</a-radio>
            <a-radio :value='2'> 否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="推送判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group v-model="Push" v-decorator="['isPush', {rules: [{required: true}]}]" >
            <a-radio :value="1"> 是</a-radio>
            <a-radio :value="2"> 否</a-radio>
          </a-radio-group>
        </a-form-item>

编辑完毕，运行。。。报错。。。。

什么意思呢？查了一些东西发现，v-decorator内部已经封装了这是初始值，所以我们设置的value 或者 v-model 都是不行的（也有的帖子会说，只是控制台输出错误，效果可以实现，但不知道为什么我的不行。。。），再次开整。。
这一次，我直接不用v-mode ，采用v-decorator 的默认值 initialValue 进行设置

	<a-form-item 
          label="报警判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol" >
          <a-radio-group v-decorator="['isWarning', {rules: [{required: true}],initialValue:Warning}]">
            <a-radio :value='1'> 是</a-radio>
            <a-radio :value='2'> 否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="推送判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['isPush', {rules: [{required: true}],initialValue:Warning}]" >
            <a-radio :value="1"> 是</a-radio>
            <a-radio :value="2"> 否</a-radio>
          </a-radio-group>
        </a-form-item>

编辑完毕，运行。。。。没效果。。。

What？？ 控制台很干净，也没有报错，也正常输出。。
仔细查看后发现，在表单初始渲染阶段，单选框其实是已经被渲染上的，但是又立刻被渲染成空。。。
再次冲浪，查询。。。发现原因，离谱。。把 :value 前面的 ：删掉即可

最终版

<a-form-item
          label="报警判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group  v-decorator="['isWarning', {rules: [{required: true}],initialValue:Warning}]"  >
            <a-radio value='1'> 是</a-radio>
            <a-radio value='2'> 否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          label="推送判断"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group  v-decorator="['isPush', {rules: [{required: true}],initialValue:Push}]" >
            <a-radio value="1"> 是</a-radio>
            <a-radio value="2"> 否</a-radio>
          </a-radio-group>
        </a-form-item>

总结：前端小白，多多磨炼。。。