VueJS输入验证推送/弹出到阵列

时间:2017-09-07 03:21:11

标签: javascript vue.js vuejs2

如果输入的用户名或密码为空,如何将项添加到hasErrors数组中,如果输入不为空则删除它们,以便动态启用/禁用提交按钮上的禁用类?

<form>
    <input type="username" v-model="form.username">
    <input type="password" v-model="form.password">
    <input type="submit" :disabled="hasErrors.length > 0">
</form>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                username = '',
                password = '',
                hasErrors: []
            }
        }
    });
</script>

1 个答案:

答案 0 :(得分:3)

您可以在这种情况下使用计算属性:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: '',
            }
        },
        computed: {
            hasErrors: function(){
                var errors = [];
                if(this.form.username == '') errors.push('username');
                if(this.form.password == '') errors.push('password');
                return errors;
            }
        }
    })
</script>

然后使用

<input type="submit" :disabled="hasErrors.length > 0">