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);
    }
}

Answer 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