Ant Design Vue使用支持v-model效验的FormModel表单遇到的一个坑
时间:2020-05-12
本文章向大家介绍Ant Design Vue使用支持v-model效验的FormModel表单遇到的一个坑,主要包括Ant Design Vue使用支持v-model效验的FormModel表单遇到的一个坑使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
按照官网上用法写好表单后,在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!
原文地址:https://www.cnblogs.com/jardeng/p/12877495.html
- 调整渐变下降的学习率
- 多线程之传统多线程
- ios 常用的正则表达式(手机号邮箱md5加密验证空字符串等)
- Spring Cloud构建微服务架构:Hystrix监控面板【Dalston版】
- 云原生应用的12要素
- Universal-Image-Loader源码分析,及常用的缓存策略
- ios textView跟随键盘的移动
- Android:屏保软件的开发
- CoordinatorLayout
- 从零开始的Spring Security Oauth2(二)
- 简化Swagger使用的自制Starter:spring-boot-starter-swagger,欢迎使用和吐槽
- demo3同通讯录展示的方式分组排序
- Android手势研究(textview及listview对比验证)
- demo2动态加载显示商品详情页
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux中的tcpdump命令示例详解
- Linux系统文件的默认权限和特殊权限
- 如何判断一个对象是不是数组
- Linux使用NetworkManager随机生成你的MAC地址
- CentOS6.5下搭建文件共享服务Samba的教程
- ES5中的继承
- Linux定时自动删除旧垃圾文件的Autotrash工具
- Thinking in DAX with PowerBI - 逻辑框架 - 计算逻辑
- Linux并发执行很简单,这么做就对了
- 一条命令让你明白shell中read命令的常用参数
- 防抖与节流
- 一道题理解Linux中sort命令的多个参数
- Centos7服务器下启动jar包项目的最佳方法
- JavaScript易错点(长期更新)
- Centos7.5配置java环境安装tomcat的讲解