Tengo un valor de nombre y apellido dentro de mi estado que necesito obtener de mi selección para realizar una llamada a la API. Pero cuando trato de obtener el valor de firstName y lastName de forma independiente, es imposible porque está fuera del alcance de v-for . Así que realmente busqué mucho para esto, pero no pude encontrar mucho. Necesito tomar el valor de los 2 selectores firstName y lastName de forma independiente. Aquí está mi plantilla:
<select class="form-select" @change="showValueForTest"> <option value="" disabled selected hidden>Select a manager</option> <option value="">All the managers</option> <option v-for="(manager,index) in managers" :key="manager+index" :value="manager.firstName +' '+ manager.lastName">{{manager.firstName}}{{manager.lastName}} </option> </select>Aquí está mi método para verificar si el valor existe, da indefinido
showValueForTest(event){ console.log(event.target.value.firstName) }Puede y v-model para seleccionar:
new Vue({ el: "#demo", data() { return { selected: null, managers: [{firstName: 'aa', lastName: 'bb'}, {firstName: 'cc', lastName: 'dd'}] } }, methods: { showValueForTest(){ console.log(this.selected.firstName) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <select class="form-select" v-model="selected" @change="showValueForTest"> <option value="" disabled selected hidden>Select a manager</option> <option value="">All the managers</option> <option v-for="(manager, index) in managers" :key="index" :value="manager"> {{manager.firstName}}{{manager.lastName}} </option> </select> </div>