CODEWITHSUNDEEP
javascripttypescriptvue.jsvuejs2
mafortis
mafortis

Reputation: 7138

Vuejs get form data from array

I have a form which is showing multiple input based on database data and I need to get each input value when I submit my form.

Code

<form ref="form" :model="form">
    <div class="row">
        <div
        class="col-md-6"
        v-for="(field, index) in fields"
        :key="index"
        >
        <input
            class="form-control"
            v-model="form.field"
            :placeholder="field.title"
        />
        </div>
    </div>
    <vs-button
        class="mt-3"
        @click="onSubmit"
        native-type="submit"
        gradient
    >
        Generate
    </vs-button>
</form>


data() {
    return {
      fields: [],
      form: {
        field: [],
      },
    };
},

Issue

My issue is that currently when I fill 1 input others get the same value, I need to fill each input individually.

Screenshots

one

two

Any idea?

Upvotes: 1

Views: 1967

Answers (1)

Herbert Lago
Herbert Lago

Reputation: 343

You're using your v-model pointing to form.field, try to use v-model="form.field[index]"

Upvotes: 2

Related Questions