起因:
vue提供的dataRule:
dataRule: {
name: [
{required: true, message: '名称不能为空', trigger: 'blur'}
],
url: [
{required: true, message: '不能为空', trigger: 'blur'}
],
faviconUrl: [
{required: true, message: '路径不能为空', trigger: 'blur'}
],
thumbUrl: [
{required: true, message: '路径不能为空', trigger: 'blur'}
],
status: [
{required: true, message: '有效标志不能为空', trigger: 'blur'}
]
}
在chrome控制台赋值后,提交表单时,一直被必填规则校验住。
最终通过:DOM.form.__vue__.model.name=XXXX解决
$("#XXXX").form.__vue__.model.name=111111
为什么会这样?于是我在源码里打了debugger一步步调试:
一、先用普通的$("#XXX").value=1111,此时并没有触发input.js中的对value的watch方法,控制风平浪静,我自己用手动去出发input的blur事件时,input.js中handleBlur的断点生效,此时input dispatch ‘el.form.blur’监听,用的是this.value,空的...
this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
再往下走,到了form-item.js的validate方法开始对input进行校验
可以看到这里的mode[name]=this.fieldValue ,也是空的,然后传到下面一行的validator.validate(model,...)去做具体校验,肯定是被检验住了;
二、.第二种用:$("#XXX").form.__vue__.model.name=3333去赋值,此时input.js中的对value的watch方法被触发,并且dispatch 了 'el.form.change' 事件监听
往下走,执行了setNativeInputValue方法,开始对input控件的value进行赋值,
到了这里大体就明白vue对控件赋值的逻辑了,应该是VueComponent中model中先赋值,然后vue再watch value方法后 发布change事件,再对input控件的value进行赋值,所以得先对VueComponent中model赋值时才去触发,所以第一种用普通的$("#XXX").value=111,是直接对控件的value进行赋值,当手动去触发blur事件时,vue的validate方法是直接取model中的值去校验,所以一直校验不通过。
再往下走看校验,mode[name]=this.fieldValue 这个时候 已经有值了,校验通过
最后说下vue源码调试方法:
在ide中找到node_modules下的element-ui/input.js 、form-item.js 打上debugger 重新npm run一下就一可以了。