javascript - Vue select value

Question

I have some problems with vue select. I have one function that should return id as value and show text as option, but it's returning full object of selected value. For example:

I'm mapping selectable options from my backend that returns like:

    {
                "id": 179,
                "name": "Poland",
                "text": "Poland",
                "value": "Poland"
            },
            {
                "id": 100,
                "name": "Hungary",
                "text": "Hungary",
                "value": "Hungary"
            },
        {
            "value": "select_value"
        }

And my vue select looks like:

<v-select id="country" v-model="product_info.country" :options="activeCountries" :selectable="option => ! option.value.includes('select_value')" label="text" />

and Vue return a full object of selected value, for example

"country":{
            "id":100,
            "name":"Hungary",
            "text":"Hungary",
            "value":"Hungary"
         },

How do I specify in my select form to return only id for, for example:

"country":100

I know that I'm doing something wrong in v-select, but if you think that it's the problem somewhere else in the code, I will add more code from my app to resolve the problem.

question from:https://stackoverflow.com/questions/65952030/vue-select-value

Answer 1

Yo have to use the item-value prop like this:

<v-select item-value="id" id="country" v-model="product_info.country" :options="activeCountries" :selectable="option => ! option.value.includes('select_value')" label="text" />

you can see more on the vuetify documentation(https://vuetifyjs.com/en/api/v-select/#props)