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.

Could you add that you are using Vuetify please, otherwise it can be seen as misleading — Chris Townsend

Adri HM Adri HM · Accepted Answer · 2021-01-29T09:57:14

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)

Vue select value

1 Answers