开发环境
Vue 2
Ant-Design-Vue 1.7.1
问题复现
一个弹框组件采用了Ant Design Vue,包含一个多选框和一个输入框,整体格式为:
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item prop="nation">
<a-select
mode="multiple"
v-model="nation"
:options="regionOptions"
@change="onNationChange"
style="width:600px;">
</a-select>
</a-form-model-item>
<a-form-model-item prop="bidFloor">
<a-input v-model="form.bidFloor" type="number" style="width:600px;"/>
</a-form-model-item>
</a-form-model>
rules: {
country: [{ required: true, message: this.$t('mintAdNetwork.nationRegionErrorMessage'), trigger: 'change'}]
}
出现问题:当选择国家时,不管是否有选项都提示nation is required
而取消掉验证规则的required: true
发现发送的接口信息里nation
是有值的
可能会有疑问:这里为什么不用form.nation
:因为Ant Design Vue
的多选框v-model
必须绑定一级字段,否则出现无法特定情况下无法点击选项的bug
所以这里采用了nation
这个中间值并且在onNationChange
方法里对form.country
进行赋值
但矛盾的是,prop
的nation
又是在form
里找的
所以问题发现了:在prop
的nation
中找不到form
解决方法
将prop="nation"
改成prop="country"
直接跳过中间值验证即可,注意规则里也应该对应修改
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-model-item prop="country">
<a-select
mode="multiple"
v-model="nation"
:options="regionOptions"
@change="onNationChange"
style="width:600px;">
</a-select>
</a-form-model-item>
<a-form-model-item prop="bidFloor">
<a-input v-model="form.bidFloor" type="number" style="width:600px;"/>
</a-form-model-item>
</a-form-model>
解决问题!!