in vueJS, how to bind the Id of selected option in v-select v2.5.1

Question

It's been hours that I'm trying to get the id of the selected option in v-select, but it returns me the object not the id. Is there any way to get only the Id (object Id) of the selected option?

I already checked the documentation site: https://sagalbot.github.io/vue-select/docs/

I also checked the various examples in: https://codepen.io/collection/nrkgxV/

But so far I have not found the concrete solution to my problem. What is missing or am I doing wrong?

My code:

<template>
    <div>
        <v-select 
            v-model="selectedId"
            :options="items"
            label="name"
        ></v-select>
    </div>         
</template>

<script>
export default {
    data () {
    return {
        items: [
            {id: 1, name: "User 1", creator_id: 3},
            {id: 2, name: "User 2", creator_id: 1},
            {id: 4, name: "User 3", creator_id: 3},
        ],
        selectedId: '',
        ...    
        }
 }

Diseased

The selected option is selectedId. Don't read data from the DOM in Vue; read it from the component's scoped data. – Counteract

Yes @DanielBeck, thanks for the quick reply. But I'd like to get the object Id in the variable selectedId, not the object itself. is there a way? – Diseased

Why can't you just do selectedId.id? – Alterable

Alternatively, switch to Vuetify's v-select (demo). – Alterable

Answer 1

Instead of using v-model , you can listen the event on the select:

Vue.component("v-select", VueSelect.VueSelect);
new Vue({
  el: "#app",
  data () {
    return {
      items: [
        {id: 1, name: "User 1", creator_id: 3},
        {id: 2, name: "User 2", creator_id: 1},
        {id: 4, name: "User 3", creator_id: 3},
      ],
      selectedId: '' 
    }
  },
  methods: {
    selectId(e) {
      this.selectedId = e.id
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <v-select 
    @input="selectId($event)"
    :options="items"
    label="name">
  </v-select>
  <p>Selected ID: {{ selectedId }}</p>
</div>

Headliner

Answer 2

It took me quite a while to figure out but apparently you can use :reduce="item = item.id"

See: https://vue-select.org/guide/values.html#getting-and-setting

A real life saver since the "computed" approach wasn't gonna cut it in my case

Vanettavang

Answer 3

In the v-select add these attributes

item-value="id" item-text="name"

Cookshop

Answer 4

how about add a computed props id

<script>
    export default {
        data () {
            return {
                items: [
                    {id: 1, name: "User 1", creator_id: 3},
                    {id: 2, name: "User 2", creator_id: 1},
                    {id: 4, name: "User 3", creator_id: 3},
                ],
                selectedId: {}  
            }
        },
        computed: {
            id: function () {
                return (this.selectedId && this.selectedId.id)?this.selectedId.id:'';
            }
        }
    }
</script>

Dira

Yes, it does. But the problem is that I'm working on a component with almost 8 v-select. I would like to use as few variables as possible. – Diseased

Answer 5

Returning a single key with reduce

f you need to return a single key, or transform the selection before it is synced, vue-select provides a reduce callback that allows you to transform a selected option before it is passed to the @input event. Consider this data structure:

let options = [{code: 'CA', country: 'Canada'}];

If we want to display the country, but return the code to v-model, we can use the reduce prop to receive only the data that's required.

<v-select :options="options" :reduce="country => country.code" label="country" />

https://vue-select.org/guide/values.html#transforming-selections

Whip