vue watch监听一个对象的变化

q249859693

于 2022-07-07 13:31:57 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/q249859693/article/details/125655405

博客介绍了Vue中使用watch监听对象变化的方法，具体是监听ruleForm对象的username和password属性。应用场景为登陆页面，当账号和密码都不为空时，登录按钮解除禁用，还提及了相关的html和js内容。

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

vue watch监听一个对象的变化

watch监听ruleForm对象的username和password属性。

应用：登陆页面，当账号和密码都不为空时，登录按钮解除禁用。

html

        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          style="margin-top: 16px"
        >
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="账号"></el-input>
          </el-form-item>
          <el-button
            type="primary"
            @click="login('ruleForm')"
            :disabled="disabled"
            >登录</el-button
          >
        </el-form>

export default {
  data () {
    return {
    disabled: true,
      ruleForm: {
        username: '',
        password: ''
      }
    },
  watch: {
    ruleForm: {
      handler () {
        if (this.ruleForm.username !== '' && this.ruleForm.password !== '') {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  },