VueJS input Validation Push/Pop to Array

Question

How can I add items to the hasErrors array if the input username or password are empty and remove them if the input are not empty so that the disabled class on the submit button is dynamically enabled/disabled?

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

talkhabi · Accepted Answer · 2017-09-07 05:12:15Z

3

You can use computed property for this case:

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

then use

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

answered Sep 7, 2017 at 5:12

talkhabi

2,7693 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kay Singian Over a year ago

hey, this definitely works. However, I think I found a bug in Vue, if I used a input type select multiple, and the v-model is inside an object, only the 1st selected item is being saved in the data. Let's say you are allowed to select multiple username, and the name of the v-model is "form.username". If I store it in username and not form.username, it works however

talkhabi Over a year ago

Use this validation plugin vee-validate.logaretm.com @KaySingian

Collectives™ on Stack Overflow

VueJS input Validation Push/Pop to Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related