Vue 动态改变 button 的 disabled 状态 - 十七度

在使用 iview 做自定义表单验证时，有一个需求是当用户名和手机号都填写正确后，下一步按钮的 disabled 设置为 false，记录一下学习过程。

<Button type="primary" shape="circle" :disabled="checkStep1Already">下一步</Button>

data () {
    const validateMobile = (rule, value, callback) => {
        if (/(^0?[1][3-9][0-9][\d]{8}$)|(^0[1-9][\d]{1,2}[- ]?[\d]{7,8}[-| ]?[\d]*$)/.test(value)) {
            this.mobileAlready = true
            callback()
        } else {
            this.mobileAlready = false
            callback(new Error('请输入正确的手机号码'))
        }
    }
    const validateUsername = (rule, value, callback) => {
        if (/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,15}$/.test(value)) {
            this.usernameAlready = true
            return callback()
        } else {
            this.usernameAlready = false
            return callback(new Error('用户名要求4-15字符'))
        }
    }
    return {
        usernameAlready: false,
        mobileAlready: false,
        formData: {
            username: '',
            mobile: '',
            email: '',
            password: '',
        },
        formRule: {
            username: [{
                validator: validateUsername,
                required: true,
                trigger: 'blur'
            }],
            mobile: [{
                validator: validateMobile,
                required: true,
                trigger: 'blur'
            }],
            password: [{
                required: true,
                message: '请填写密码',
                trigger: 'blur'
            }, {
                type: 'string',
                min: 6,
                message: '密码长度不能小于6位',
                trigger: 'blur'
            }]
        }
    }
},
computed: {
    checkStep1Already () {
        return !(this.usernameAlready && this.mobileAlready)
    }
}