今天做表单提交功能需求的时候接触到了Vue中的 watch监听方法,它可以用来监听vue实例上的数据变动。
绑定按钮的disabled
设定watch监听,deep:true 设置深度监听 当telphone值发生变化时触发handler方法
注意:这里的function不能写成箭头函数,不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
handler函数中的意思就是每次telphone中数值发生变化时,都对其进行格式校验一次,当格式正确是,按钮恢复使用,非常好理解
代码如下:
<el-form-item>
<el-button
type="success"
:disabled="openIsDisabled"
@click="submitForm('loginForm')"
style="width: 100%"
>{{ $t("login.Login") }}</el-button
>
</el-form-item>
watch: {
'loginForm':{
//deep:true 设置深度监听 当telphone值发生变化时触发handler方法
deep:true,
//这里的function不能写成箭头函数,不然this将不在此组件内
handler:function(newVal,oldVal){
console.log(newVal);
this.$refs["loginForm"].validate((valid) => {
console.log(valid)
if(!valid || this.loginForm.username === '' || this.loginForm.password === ''){
this.openIsDisabled = true;
}else{
this.openIsDisabled = false;
}
})
}
}
},