vue watch监听一个对象的变化

最新推荐文章于 2024-02-09 15:54:02 发布

q249859693

最新推荐文章于 2024-02-09 15:54:02 发布

阅读量396

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/q249859693/article/details/125655405

版权

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