vue watch监听一个对象的变化

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>
          

js

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
    }
  },
  },