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⼀步步调试:blur事件
⼀、先⽤普通的$("#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⼀下就⼀可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。