I'm facing a challenge with a form that displays multiple inputs based on database data. When I submit the form, I need to capture the value of each input separately.
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
The current issue is that when I enter a value in one input, all the other inputs get the same value. I need each input to retain its own unique value.
Screenshots
https://i.sstatic.net/ndIQP.png
https://i.sstatic.net/obZlJ.png
Any suggestions?