对于饿了么组件自定义验证规则,组件库文档已经非常详细了: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使用本地变量进行验证,监测不到本地变量的变化 的问题的更多相关文章

  1. elementui 多组件表单验证

      最近在做管理后台,vue2.0基于elementui框架进行开发. elementui的api中表单验证都是单个vue文件的验证.而我的保存按钮放在了父组件了,验证对象为三个子组件我的灵机一动 想 ...

  2. JNI环境变量——JNIEnv*的使用 &&配置jd环境变量

      如果没有配置环境变量,先配置环境变量,如下: 1.右键我的电脑——高级——环境变量——下面的系统变量 2.选择[新建系统变量]--弹出“新建系统变量”对话框,在“变量名”文本框输入“JAVA_HO ...

  3. OC 实例变量(Instance Var)和成员变量(member var)区别

    摘要:  Objective-C  引入了“实例变量"的概念,但同时, 也经常出现 “成员变量”的声音. 到底什么是实例变量,什么是成员变量,二者的区别是什么呢? 今天查看apple 的官方 ...

  4. linux学习之十、变量的取用与配置:echo, 变量配置守则, unset

    vim vim 的环境设定参数 :set nu :set nonu 就是设定与取消行号啊! :set hlsearch :set nohlsearch hlsearch 就是 high light s ...

  5. hadoop搭建杂记:Linux下JDK环境变量的设置(三种配置环境变量的方法)

    Linux下JDK环境变量的设置(三种配置环境变量的方法) Linux下JDK环境变量的设置(三种配置环境变量的方法) ①修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种 ...

  6. es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量

    自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...

  7. PHP变量传值赋值和引用赋值,变量销毁

    <?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...

  8. 解释器、环境变量、如何运行python程序、变量先定义后引用

    python解释器的介绍.解释器的安装.环境变量的添加为什么加环境变量.如何调取不同的解释器版本实现多版本共存.python程序如何运行的.python的变量定义 一.python解释器: 用来翻译语 ...

  9. 假设result 是一个float型变量,value是一个int型变量。执行以下赋值语句以后,变量value将是什么类型?为什么?

    假设result 是一个float型变量,value是一个int型变量.执行以下赋值语句以后,变量value将是什么类型?为什么? 在执行这条语句的过程中,保存在vulue变量中的值被读取出来并转化为 ...

  10. TF:TF定义两个变量相乘之placeholder先hold类似变量+feed_dict最后外界传入值—Jason niu

    #TF:TF定义两个变量相乘之placeholder先hold类似变量+feed_dict最后外界传入值 import tensorflow as tf input1 = tf.placeholder ...

随机推荐

  1. spark执行命令 监控执行命令

    #!/bin/bash #/usr/hdp/current/flume-server/bin/flume-ng agent -c conf/ -f /usr/hdp/current/flume-ser ...

  2. 基于MATLAB的多项式数据拟合方法研究-毕业论文

    摘要:本论文先介绍了多项式数据拟合的相关背景,以及对整个课题做了一个完整的认识.接下来对拟合模型,多项式数学原理进行了详细的讲解,通过对文献的阅读以及自己的知识积累对原理有了一个系统的认识.介绍多项式 ...

  3. 几个并发的术语解释——QPS,TPS,PV

    从英文全称翻译出字面意思就OK啦!  PV=page view TPS=transactions per second QPS=queries per second RPS=requests per ...

  4. 2017-2018-1 《信息安全技术》实验二——Windows口令破解

    2017-2018-1 <信息安全技术>实验二--Windows口令破解 所用工具 系统:能勾起我回忆的Windows 2003 工具:LC5.SuperDic Windows口令破解 口 ...

  5. 20155305乔磊2016-2017-2《Java程序设计》第二周学习总结

    20155305乔磊 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 第三章学习了基本类型 整数(short.int.long) 字节(byte) 浮点数(f ...

  6. 【洛谷P2252】取石子游戏

    题面 题解 威佐夫博弈 代码 #include<cstdio> #include<algorithm> #include<cmath> #define RG reg ...

  7. Python:静态方法、类方法、实例方法

    1. 静态方法@staticmethod (1)无需自身对象的self参数和自身类的cls参数,可直接通过 类名.方法名 进行调用 (2)Python中并不是真正意义上的静态方法,因为类定义本身就是个 ...

  8. 三边定位 c#

    MATLAB是美国MathWorks公司出品的商业数学软件,用于算法开发.数据可视化.数据分析以及数值计算的高级技术计算语言和交互式环境,主要包括MATLAB和Simulink两大部分. 项目中用到三 ...

  9. 学习HTML 第二节.HTML头部

    HTML为什么要有个头部?还不太明白,可能是一些要提前声明的东西吧.先看看有什么内容吧. 可以添加在头部区域的元素标签为: <title>标题,这个我们知道了: <meta>使 ...

  10. selenium自动化之js处理点击事件失效

    有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...