Vue(二十)——formItem的小坑
radio出现这种情况,一开始什么都没有选择,因为value值定的是“”,但是一旦选择就是全部都选了。所以点击某个选项,实际上点击的整个itemGroup,也就是说标识单个radio的键和整个group的键重合了。<a-form-model-item label="查询类型" ><a-radio-groupv-model="formData.queryTypeData" >
·
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);
};
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)