VueJS access select options inside v-for from parent

April 29, 2022

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)
}

>Solution :

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>