vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败
二.
<el-form :model="form" :rules="rules">
<el-form-item label="数据模板" prop="template" >
<el-col :span="20">
<el-input type="textarea" v-model="form.template" :rows="8" placeholder="请输入数据模板" :readonly="true" ></el-input>
</el-col>
</el-form-item>
</el-form> export default {
data() {
return {
form: {
template: null
}
rules: [
template:{required: true, message: '数据模板不能为空', trigger: 'blur'}
]
}
}
}
以上是正确的验证例子。 三.
目前碰到过两种情况会导致验证失败,而且使用自定义验证方法的时候发现value的值为undefined:
1.prop和v-model的值名称不一致
1必须和2名称保持一致,3处的变量也需和2处的prop保持一致
2.在data{}里面没有声明变量也会导致验证失败,使获取的值value值为undefined。
vue踩坑:vue+ element ui 表单验证有值但验证失败。的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- nodejs querystring踩坑笔记----只能用于表单提交
API中的实例: var http = require('http'); var querystring = require('querystring'); var postData = querys ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- Vue踩坑日记-Element this.$message 找不到模块
在使用Vue.js的 Element框架时,无法使用Message组件 浏览器提示:找不到组件 原始写法: this.$message({ message: '恭喜你,这是一条成功消息', type: ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- Element Form表单实践(上)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
随机推荐
- 浅谈单利模式及其应用场景(Python)
python 中的单利模式 使用场景: + Python的logger就是一个单例模式,用以日志记录 + Windows的资源管理器是一个单例模式 + 线程池,数据库连接池等资源池一般也用单例模式 + ...
- CodeForces 429B Working out DP
E - Working out Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Su ...
- gcd综合
问题: 如果正整数大于了1000有什么影响? 1.递推式gcd: int gcd(int a,int b) { ) { int c=a%b; a=b; b=c; } return a; } 2.递归式 ...
- java的异常体系 及强制转换
一,异常 1.常见的几种异常: StackOverFlow 栈溢出错误:写递归函数的时候,没有定义递归结束的条件. ArrayIndexOutofBounds 数组越界:如新new一个数组,in ...
- 小白学 Python 数据分析(9):Pandas (八)数据预处理(2)
人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...
- 利用Graphics的截图功能CopyFromScreen
该方式是直接对屏幕进行截图操作 UserControl chartContainPanel = new UserControl(); Graphics graph = chartContainPane ...
- Java日志介绍(3)-Logback
Logback 继承自Log4j,它建立在有十年工业经验的日志系统之上.它比其它所有的日志系统更快并且更小,包含了许多独特并且有用的特性. 1.配置 1.1.加载配置 Logback能够在初始化期间自 ...
- 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...
- MySQL的JDBC驱动(8.0版本)
1.引用外部库 mysql-connector-java-8.0.版本的jar 2.jdbc驱动类:com.mysql.jdbc.Driver 改成 com.mysql.cj.jdbc.Drive ...
- Redis-异步消息
关于异步消息,大家都知道,如下: 这些用起来都是比较复杂的,RabbitMQ先要创建Exchange,在创建Queue,还要将Queue和Exchange通过某种规则绑定起来.发消息之前要指定rout ...