vue之watch 深度监听

今天做表单提交功能需求的时候接触到了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;
                    }
                })
            }
        }
  },