elementUI使用本地变量进行验证,监测不到本地变量的变化 的问题
对于饿了么组件自定义验证规则,组件库文档已经非常详细了:http://element-cn.eleme.io/#/zh-CN/component/form
我这里将验证中固定的值提取出来使用变量进行保存,方便后面维护。
像下面这种写法,如果maxUrlCount保持不变,是没有问题的

但是,如果我页面或者代码里更改了maxUrlCount,此时验证中获取到的值还是初始定义的值,并不会监测到改变后的值。
解决方案: 把验证函数也提取出来,如下面这样:

------------------------------------------------------------------------------------ 原因解析 ---------------------------------------------------------------------------------------------------------------
这里主要是因为this指针的原因
1. 如果这样写

此时的this指向调用validator函数的对象,element这里会用一个验证相关的对象:所以打印出来是undefined
2. 如果是使用的箭头函数
或者 
此时箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,而是指向了当前组件定义的类的实例;因为该类继承了Vue,所以初始化时会复制一份要读取的变量(this.maxUrlCount);但是this.maxUrlCount的改变的是Vue实例上的该属性,并没有改变当前类的实例属性;所以导致监测不到变量变化。
我这里使用的是ts的class语法,具体实现原理参见:https://zhuanlan.zhihu.com/p/48371638
3. 最后,也就是正确的写法:

此时this指向 Vue 实例,能够正确监听到变量变化
elementUI使用本地变量进行验证,监测不到本地变量的变化 的问题的更多相关文章
- elementui 多组件表单验证
最近在做管理后台,vue2.0基于elementui框架进行开发. elementui的api中表单验证都是单个vue文件的验证.而我的保存按钮放在了父组件了,验证对象为三个子组件我的灵机一动 想 ...
- JNI环境变量——JNIEnv*的使用 &&配置jd环境变量
如果没有配置环境变量,先配置环境变量,如下: 1.右键我的电脑——高级——环境变量——下面的系统变量 2.选择[新建系统变量]--弹出“新建系统变量”对话框,在“变量名”文本框输入“JAVA_HO ...
- OC 实例变量(Instance Var)和成员变量(member var)区别
摘要: Objective-C 引入了“实例变量"的概念,但同时, 也经常出现 “成员变量”的声音. 到底什么是实例变量,什么是成员变量,二者的区别是什么呢? 今天查看apple 的官方 ...
- linux学习之十、变量的取用与配置:echo, 变量配置守则, unset
vim vim 的环境设定参数 :set nu :set nonu 就是设定与取消行号啊! :set hlsearch :set nohlsearch hlsearch 就是 high light s ...
- hadoop搭建杂记:Linux下JDK环境变量的设置(三种配置环境变量的方法)
Linux下JDK环境变量的设置(三种配置环境变量的方法) Linux下JDK环境变量的设置(三种配置环境变量的方法) ①修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种 ...
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...
- PHP变量传值赋值和引用赋值,变量销毁
<?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...
- 解释器、环境变量、如何运行python程序、变量先定义后引用
python解释器的介绍.解释器的安装.环境变量的添加为什么加环境变量.如何调取不同的解释器版本实现多版本共存.python程序如何运行的.python的变量定义 一.python解释器: 用来翻译语 ...
- 假设result 是一个float型变量,value是一个int型变量。执行以下赋值语句以后,变量value将是什么类型?为什么?
假设result 是一个float型变量,value是一个int型变量.执行以下赋值语句以后,变量value将是什么类型?为什么? 在执行这条语句的过程中,保存在vulue变量中的值被读取出来并转化为 ...
- TF:TF定义两个变量相乘之placeholder先hold类似变量+feed_dict最后外界传入值—Jason niu
#TF:TF定义两个变量相乘之placeholder先hold类似变量+feed_dict最后外界传入值 import tensorflow as tf input1 = tf.placeholder ...
随机推荐
- PetaLinux安装及使用
Description/说明 PetaLinux版本:2016.4 操作系统版本:Ubuntu 16.04(如使用Ubuntu,墙裂建议使用16.04,其他版本官方手册并没有标明支持,可能会出现莫名其 ...
- Matlab_GUI
1.GUI中控件的属性 BackgroundColor 控件的背景 FontSize 控件字体的大小
- 20145207《Java程序设计》实验一(Java开发环境的熟悉)实验报告
<Java 程序设计>实验一(Java开发环境的熟悉)实验报告 目录 改变 Java开发环境的熟悉实验要求 实验成果 课后思考 改变 修改了之前仅仅是贴了图片,连代码都没粘的状态.增加了自 ...
- 【MongoDB】如何注册windows服务
一.为什么要注册windows服务 mongodb启动比较麻烦,每次都要cmd去开启.注册windows服务,可以设置开机启动,比较友好. 二.如何注册windows服务 1.安装mongodb 2. ...
- 使GDAL库支持中文路径或中文文件名的处理方法
之前生成的gdal 2.1.1动态库,在通过命令行执行时,遇到有中文路径或中文图像名时,GDALOpen函数不能正确的被调用,如下图: 解决方法: 1. 在所有使用GDALAllRegist ...
- PHP中的事件处理
看下面的事件类 class Event { protected static $listens = array(); /** * [listen 注册监听事件] * @param [string] $ ...
- 动态权限<一>基本介绍
android 6.0以上为了保护用户的隐私,和以往被人诟病的权限机制,确立了新的权限机制.从 Android 6.0(API 级别 23)开始,用户开始在应用运行时向其授予权限,而不是在应用安装时授 ...
- python全栈开发- 前⽅⾼能-迭代器
python_day_12 今日主要内容 1, 函数名的应用,第一类对象 函数名可以像变量一样进行使用 1.赋值 2.作为list元素 3.作为参数 4.作为返回值 2, 闭包 内部函数访问外部函数的 ...
- 区块链技术:每位CEO都应了解
区块链技术有可能成为一项广泛应用的突破性技术,像蒸汽机.电力或因特网那 样,改变整个社会和经济的运行方式. 对企业而言,信任至关重要.今天,我们基于信任,将钱存放在银行,通过电商企业 网购产品,并且依 ...
- mysql数据库 root密码重置
问题 忘记了MySQL的密码,网上搜索的杂七杂八,汇总一下. mysql版本是windows的mysql 5.7 步骤 1.以管理员身份打开cmd,切换到MySQL的bin目录 默认的话,一般是在C: ...