首页 > 其他 > 详细

Ant Design Vue使用支持v-model效验的FormModel表单遇到的一个坑

时间:2020-05-12 18:21:49      阅读:882      评论:0      收藏:0      [点我收藏+]

按照官网上用法写好表单后,在a-select上绑定了change事件

<a-form-model-item label="类型" prop="config.type">
  <a-select v-model="form.config.type" placeholder="请选择数据库类型" @change="handleChange">
    <!-- <a-select-option value="">请选择</a-select-option> -->
    <a-select-option value="0">MySQL</a-select-option>
    <a-select-option value="1">SQL Server</a-select-option>
  </a-select>
</a-form-model-item>

结果下拉框选择不了了,F12查看控制台,报错了:TypeError: originalEvents.change.apply is not a function

技术分享图片

 

 

源头是FormItem.js,change.apply是未定义

技术分享图片

 

 

折腾许久,最后发现官网FormModel文档的API处有提醒注意

技术分享图片

 

 

意思就是From.Item把input、select等表单项的blur、change事件劫持了,用来做自动效验,如果我们要给input、select写blur、change怎么办呢?

按照官网的写法做,但是要注意几个点:

1、要给a-form-model-item设置一个ref引用名称。

2、autoLink要设置成false,表示是否自动关联表单域,对于大部分情况都可以使用自动关联,如果不满足自动关联的条件,可以手动关联。

3、定义change事件,最后写上:this.$refs.dbType.onFieldChange(),用于表单的自动效验。

handleChange (value) {
console.log(value)
 // TODO
this.$refs.dbType.onFieldChange() }

最后完整的代码:

<a-form-model-item label="类型" ref="dbType" prop="config.type" :autoLink="true">
  <a-select v-model="form.config.type" placeholder="请选择数据库类型" @change="handleChange">
    <!-- <a-select-option value="">请选择</a-select-option> -->
    <a-select-option value="0">MySQL</a-select-option>
    <a-select-option value="1">SQL Server</a-select-option>
  </a-select>
</a-form-model-item>
handleChange (value) {
  console.log(value)
  // TODO
  this.$refs.dbType.onFieldChange()
}

 

Over!

Ant Design Vue使用支持v-model效验的FormModel表单遇到的一个坑

原文:https://www.cnblogs.com/jardeng/p/12877495.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!