Vue(二十)——formItem的小坑

radio出现这种情况，一开始什么都没有选择，因为value值定的是“”，但是一旦选择就是全部都选了。所以点击某个选项，实际上点击的整个itemGroup，也就是说标识单个radio的键和整个group的键重合了。

<a-form-model-item label="查询类型" >
    <a-radio-group
            v-model="formData.queryTypeData" >                 
//group作为一个整体，这样才是单选，而group中绑定的formData.queryTypeData是一个双向绑定。初始单选值放在这个data字段中，而选择的结果发生了改变之后，该data字段也会发生改变，从而可以作为表单的选择结果导出。
        <a-radio
                v-for="(item,index) in formItem2.queryTypeItem"    //for循环不能写到group中，不然就是一个radio作为一个group，就不是单选了，是多选。
                :key="index"
                :value="item"                                      
//由于item值不同，所以可以保证每个radio的值不同。但是为什么formData.queryTypeData是选择radio的value值进行保存呢？而不是其他的字段呢？在这个程序中并没有一个地方定义了他们的绑定关系。  https://www.antdv.com/components/radio-cn/，在官网有定义。
                 即v-model绑定的对象是value，而v-model又绑定了queryTypeData，所以queryTypeData和value值是绑定的关系。    
        >
            {{item}}
        </a-radio>
    </a-radio-group>
</a-form-model-item>

<a-form-model-item :wrapper-col="{offset:10}">
    <a-button type="primary" @click="onSubmit">
        信息查询
    </a-button></a-form-model-item>

export default {
    name: "chinaNetInfo",
    data() {
        return {
            formData:{
                queryTypeData:"a",     //选项的初始值设置为选择流量。
            },
            formItem2:{
                queryTypeItem:["a", "b", "c"],     //生成radio选择的值，要跟选择的值区分开。
            },
        }
    },
    methods:{
        onSubmit(){
                    alert('submit!');
                    console.log(this.formData);
                  };
        },
}