vue-select library set default value not working properly

Question

This is the library that I'm using.

vue-select

And I have this kind of data

[
    { text: "AAA", value: 1 },
    { text: "BBB", value: 2 },
]

<v-select
    id="modal-job_type"
    :value="1" // v-model also doesnt work for me
    item-value="value"
    name="job_type"
    :options="jobTypeOptions"
    label="text"
/>

I expect to see "AAA" selected.

But instead I see "1" text.

What is wrong?

Answer 1

I guess you need to set a value of options to v-model, instead of the index. (Though, I couldn't find a page where it is clearly stated in the official document.)

It would look like;

const options = [
    { text: "AAA", value: 1 },
    { text: "BBB", value: 2 },
]
const selected = ref(options[1]) // Setting initial value

<v-select
    v-model="selected"
    label="text"
/>

Also, Vue Select does not have item-value property. It seems you are confused with Vuetify's v-select. https://vuetifyjs.com/en/api/v-select/#props-item-value