Vue, get value and name of select option

Question

I'm using html and laravel to build select box options in a foreach loop

This works and populates with ID as value and name as the option. What I want, and can't quite figure out here, is how to take my function when I call it and get the id and value as separate vue options for a post axios call I'm going to make.

So when I select the option and submit the form to call the function, how can I get the ID as one prop and the name as another?

<select>
@foreach($details as $detail)    
<option value="{{$detail->id}}">{{$detail->name}}</option>
@endforeach
</select>

new Vue({
  data: {
    detailID: [''],
    detailName: ['']
  },
  methods: {
   let data = {

                detailID: this.detailID,
                detailName: this.detailName
            };
  }
})

Answer 1

Use v-model to bind the selection to your component data. SeeForm input bindings:

new Vue({
   data: {
      detailID: ""
   },
   // now you can access the id with this.detailID in your post request
})

<select v-model="detailID">
  @foreach($details as $detail)    
  <option value="{{$detail->id}}">{{$detail->name}}</option>
  @endforeach
</select>

And if you need both id and name, one work around could be:

new Vue({
   data: {
      detail: ""
   },
   // now you can access the id & name with this.detail.split(',') in your post request
})

<select v-model="detail">
  @foreach($details as $detail)    
  <option value="{{$detail->id.','.$detail->name}}">{{$detail->name}}</option>
  @endforeach
</select>

Answer 2

Here is a code example just using vue.js

Template

<div id="app">
  <select v-model="selectedDetailId">
    <option v-for="detail in details" v-bind:value="detail.id">
      {{ detail.name }}
    </option>
  </select>
</div>

Script

new Vue({
  el: '#app',
  data: {
    selectedDetailId: null,
    details: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
      { id: 3, name: 'C' }
    ]
  },
  methods:{
    post(){
       //your selected Id is this.selectedDetailId
    }
  }
})

You can find more details and examples in the official Vue.js docs. https://vuejs.org/v2/guide/forms.html#Value-Bindings

Answer 3

You would need to set a v-model to your select element and bind the entire object to each option element instead of just the id like you are doing in your example. Here is a codepen with a simple example.