vue 给form表单赋值_vue页面 el-form :rules 必填校验 通过chrome 控制台赋值无法生效 逻辑溯源...

起因：

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一下就一可以了。