Creating a single array from multiple inputs in vue application

Question

I have a vue application that has a simple form section, for example, these two inputs:

            <div class=" form-group col-lg-6">
                <label>Name</label>
                <input v-model="newUserName" class="form-control" type="text" name="newUserName">
            </div>
            <div class=" form-group col-lg-6">
                <label>Email</label>
                <input v-model="newUserEmail" class="form-control" type="text" name="newUserEmail">
            </div>

So I have them set to their own v-models, and when I dump those in submission they indeed show the correct input values separately. the problem is, I want to use array.push or something similar so that, when the submit function is hit, it pushes them into a single 'details' array.

So for the example below, i want to push name and email to the details array and only show the array with both values in the console

    data() {
    return {
        details: [],
        newUserName:'',
        newUserEmail: '',
    }
},
methods: {
    showDetails() {

        let data = {
            details: this.details
        };
        console.log(data);
    }
}

dako · Accepted Answer · 2020-03-19 21:48:12Z

1

Well, you can just push them to the array. When clicking on the submit button you can call some method submit() for example:

submit() {
this.details.push(this.newUserName)
this.details.push(this.newUserEmail)

console.log(this.details)
}

If you want to reset it on every submit you can just add this.details = [] in the begining of the method

answered Mar 19, 2020 at 21:48

dako

1,1932 gold badges13 silver badges26 bronze badges

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

3 Comments

Geoff_S Over a year ago

Thank you! That worked, and setting the array in the beginning of the method was definitely needed for that reset, thanks!

Geoff_S Over a year ago

Can I explicitly push them to an index like 'value'? so that I would get 0: values: "email"

dako Over a year ago

Well you maybe just need to wrap them in one object by default. Your details can be an object with the properties inside and you can just bind the inputs with v-model to it e.g. v-model="details.newUserName" and use the details however you like in the submit.

Collectives™ on Stack Overflow

Creating a single array from multiple inputs in vue application

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related