How to pre-selected in vue-next-select

[joneyspark]

<vue-select
    v-model="institute_id_1"
    :options="institutes_1"
    label-by="institute_name"
    close-on-select
    search-placeholder="Select a University"
    searchable
    dropdown-item
    value-by="id"
    @selected="institute_id_1"
    @update:modelValue="onChangeUniversity(1)"
  >
</vue-select>

Here is the code I am trying to edit and here you see I have already selected value which contains in v-model but How I could use pre-selected the select option?

[soc221b]

How I could use pre-selected the select option?

Do you mean that how to preselect an option and it is in the options (institutes_1)?

[joneyspark]

I am glad to see your reply but I am not using composition API my code link below. I fetch data and set v-model value so I have v-model value set already but vue-select not working plz check and help me. Thanks

<template>
    <vue-select
        v-model="institute_id_1"
        :options="institutes_1"
        label-by="institute_name"
        close-on-select
        search-placeholder="Select a University"
        searchable
        dropdown-item
        value-by="id"
        @selected="institute_id_1"
        @update:modelValue="onChangeUniversity(1)"
    >
    </vue-select>
</template>

<script>
export default {
    data() {
        return {
            institute_id_1: ''
        }
    },
    async mounted() {
        await this.getEditData()
    },
    methods: {
        getEditData(){
             Request.GET_REQ(`/edit-lead/${id}`)
        .then(res => {
            this.institute_id_1 = res.data.id
        })
        .catch(err => console.log(err))
        }
    },
}
</script>

[soc221b]

I have updated the sandbox with your example, please check it again 😄.

But where and when did you load the options: instituetes_1?

Since vue-next-select will remove options from its inner modelValue which do not exists in the options, you have to do set modelValue one tick after:

    async getEditData() {
        await new Promise((resolve) => {
            setTimeout(resolve, 1000);
        });

        this.options = [
            { institute_name: "A", id: "a" },
            { institute_name: "B", id: "b" },
            { institute_name: "C", id: "c" },
        ];
        console.log("options are loaded");
    
        this.$nextTick(() => {
            this.modelValueWithPreselectedOption = this.options[0];
            console.log("modelValue is setted");
        });
    },

Hope this works for you 😃 .

[joneyspark]

@iendeavor Thanks a lot for the idea. Using of setTimeout solved it

[soc221b]

👍 I would recommend you use nextTick instead of setTimeout, it would be more concise.

[joneyspark]

Thanks for the Suggestions 👍

[rrrrando]

What if i wanted to wrap the vue-select-next, so it would be easier to use across my project. How would i use the nextTick to pass modelValue prop to the component with composition api? Right now i'm just using a self invoking method but that doesn't seem to work

const newValue = ref(`null`);
const newOptions = ref(`null`);

(async () => {
    newOptions.value = props.options;
    await nextTick();
    newValue.value = props.modelValue;
})();

 <vue-select
        v-model="newValue"
        :options="newOptions"
        searchable
        close-on-select
        clear-on-select
></vue-select>

Thanks for taking the time to develop a component like that (Y)

[soc221b]

@rrrrando

I create an example for this, it seems wok.

https://codesandbox.io/s/vue-next-select-issue-227-forked-6gsgd?file=/src/components/my-select.vue

---

In this case, you probably need to watch the props.options not just IIFE, since the options is fetching from server.

(async () => {
    newOptions.value = props.options;
    await nextTick();
    newValue.value = props.modelValue;
})();

BTW, maybe it is better to watch the modelValue instead of options:
https://codesandbox.io/s/vue-next-select-issue-227-83mr4?file=/src/components/my-select.vue

[rrrrando]

Thanks!