Vue-Select reduce is not working - Showing ID instead of the label

I am using this vue select https://vue-select.org/guide/values.html#getting-and-setting for the dropdown countries. Here is the code:

<v-select
    v-model="project_data.country"
    :options="project_data.countries"
    :reduce="country => country.value" 
    label="label"
    :state="errors.length > 0 ? false : null"
/>

This project_data.country value is : 5 This project_data.countries value is array of object. Something like :

[
    { value : 1, label : Dhaka },
    { value : 2, label : India },
    { value : 3, label : Bangladesh },
    { value : 4, label : UK },
    { value : 5, label : UA },
    { value : 6, label : Australia },
    { value : 7, label : UAE },
    and so on ......
]

Now on my local, I can see the label on the dropdown BUT when I complied the code using :

npm run prod

and compressed the whole project and upload to live server then I can see the ID instead of the label. Something like this:

Does anyone know why? I am spending tooooo many hours to figure it out :( :( :(

My goal is to get the single ID value from the dropdown ( I can ) and save it to the database and then again show the label ( I can't ) based on the single ID value.

robert-assurant

2 years ago

Level 1

Not sure if you ever figured this out. But basically, it looks like you don't even need the reduce.

the label field if the field use for displaying the data in the drop down and the v-model will get updated with that entire object with the value. Then you parse it out when posting.

<v-select
    v-model="project_data.country"
    :options="project_data.countries"
    label="label"
    :state="errors.length > 0 ? false : null"
/>

will display Label for the dropdown but when saving it will save that entire object.

Shibbir

2 years ago

Level 3

@robert-assurant Thanks for your reply but the issues was the data type. I got string value instead of integer value.

1 like

Please or to participate in this conversation.