Hola, estoy tratando de crear varios formularios a partir de un bucle que proviene de elementos dinámicos cargados desde la base de datos. Sin embargo, creo que lo estoy haciendo mal, esto es lo que ya he hecho. Funciona más o menos pero me gustaría tener la forma correcta de proceder.
Gracias por adelantado
submitForm: function (e) { e.preventDefault(); e.target.elements.techId.value // OK this.selectUser // value is other form not form used button }Modelo
<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>Tal vez como el siguiente fragmento:
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>