I'm having a firstName and a lastName value inside my state that I need to get from my select to make an API call. But when I try to get the value of the firstName and the lastName independently it is impossible because it is out of the scope of the v-for. So I really looked alot for this but I couldn't find much. I need to take the value of the 2 selectors firstName and lastName independently.
Here is my template :
<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>
Here is my method to check if the value even exists , it gives undefined
showValueForTest(event){
console.log(event.target.value.firstName)
}
You can and v-model to select :
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>