javascript - VueJS 输入验证 Push/Pop 到数组

Question

如果输入的用户名或密码为空，如何将项目添加到 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>

Answer 1

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

<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">