vue之watch 深度监听

最新推荐文章于 2025-04-23 14:27:57 发布

zuo_zuo_blog

最新推荐文章于 2025-04-23 14:27:57 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/zuo_zuo_blog/article/details/113998309

版权

Vue 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何在Vue中使用watch方法进行深度监听，确保telphone字段变化时自动验证表单并控制按钮禁用状态。特别强调了箭头函数在这一场景下的适用性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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