Vue Select how to bind 1 property to v-model

Question

I've put v-model in v-select but it returns the whole object

<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select v-model="selected" :options="options" value="id" label="labels">

  </v-select>  
  {{selected}}
</div>

    Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    options: [      
      {id: 1, labels: 'foo'},
      {id: 3, labels: 'bar'},
      {id: 2, labels: 'baz'},
    ],
    selected: '',
  }
})

this will result to this

is there a way to get the selected objects id only instead of the whole object? I've tried putting value="id" but still doesn't work.

Answer 1

Your best option would be to use a computed property so you can manipulate selected to return your requested value:

computed: {
    selectedID: function () {
      return this.selected.id;
    }
  }

Working Codepen with your example