Hello I am trying to create several forms from a loop that comes from dynamic elements loaded from the database. However I think I am doing it wrong here is what I have already done. It works more or less but I would like to have the right way to proceed.
Thanks in advance
submitForm: function (e) {
e.preventDefault();
e.target.elements.techId.value // OK
this.selectUser // value is other form not form used button
}
Template
<div v-for="tech in techs" :key="tech.id" class="col-12 col-lg-3">
<h3>{{ tech.name }}</h3>
<form
name="form_tech"
method="POST"
@submit="submitForm"
>
<input type="hidden" :value="tech.id" name="techId" id="techId" />
<select
name="select_user"
class="form-select"
v-model="selectUser"
>
<option value="user_one">user one</option>
<option value="user_two">user two</option>
</select>
<button type="submit" >
Confirm
</button>
</form>
Maybe like following snippet:
const app = Vue.createApp({
data() {
return {
techs: [{id: 0, name: 'aa'}, {id: 1, name: 'bb'}, {id: 3, name: 'cc'}],
selectUser: []
};
},
methods: {
submitForm(id) {
console.log(this.selectUser[id])
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="tech in techs" :key="tech.id" class="col-12 col-lg-3">
<h3>{{ tech.name }}</h3>
<form name="form_tech" method="POST"
@submit.prevent="submitForm(tech.id)"
>
<input type="hidden" :value="tech.id" name="techId" id="techId" />
<select name="select_user" class="form-select"
v-model="selectUser[tech.id]"
>
<option value="user_one">user one</option>
<option value="user_two">user two</option>
</select>
<button type="submit">Confirm</button>
</form>
</div>
</div>