Cannot show the pre-selected value for the select box.

[Dekari]

Describe the bug A clear and concise description of what the bug is.

I have 2 tables.

1st holds all the categories 2nd holds my settings with 3 fields connected to the category_id.

I have 3 vue-next-select boxes that are using the values from DB (1st to fill in all the options, 2nd to determine what's the selected value each time)

My issue is that on initialization the "Selected" value is not there.

How should I set up my vue-next-select instances to work with?

The value that they should get pre-selected is: "v-model="store_cats.store_cat1"" (for 1st select box for example)

To Reproduce A reproduce link: https://codesandbox.io/s/github/iendeavor/vue-next-select/tree/develop/examples?file=/src/views/Playground.vue

Expected behavior A clear and concise description of what you expected to happen.

Select box to have the pre-selected options bound from DB.

Screenshots If applicable, add screenshots to help explain your problem.

See my full component code: ``

Then the script part: ` import { mapActions } from 'vuex' import VueNextSelect from 'vue-next-select' import 'vue-next-select/dist/index.min.css'

export default {
    name:'settings',
    components: {
        'vue-next-select' : VueNextSelect,
    },
    data(){
        return {
            bargain_settings:{
                user_id: this.$store.state.auth.user.id,
                store_limit:this.$store.state.auth.user.store.store_limit,
                bargain_limit:this.$store.state.auth.user.store.bargain_limit
            },
            store_settings:{
                user_id: this.$store.state.auth.user.id,
                store_descr:this.$store.state.auth.user.store.store_descr,
                oper_details:this.$store.state.auth.user.store.oper_details,
            },
            store_cats:{
                store_cat1:this.$store.state.auth.user.store.cat1_id,
                store_cat2:this.$store.state.auth.user.store.cat2_id,
                store_cat3:this.$store.state.auth.user.store.cat3_id,
            },
            avail_store_cats:[],                
            processing:false
        }
    },
    created(){
        this.getAvailStoreCats()
    },     
    methods:{
        ...mapActions({
            signIn:'auth/getUser'

        }),
        incr_bargain_limit(field) {
            this.bargain_settings.bargain_limit += 1
        },
        red_bargain_limit() {
            this.bargain_settings.bargain_limit -= 1
        },
        incr_store_limit() {
            this.bargain_settings.store_limit += 1
        },
        red_store_limit() {
            this.bargain_settings.store_limit -= 1
        },                        
        async updBargain(){
            this.processing = true
            await axios.post('/api/updstore_limits',this.bargain_settings).then(({data}) => {

                if (!data.success) {
                    this.do_show_popup_error(data.message)
                } else {
                    this.do_show_popup_success(data.message)
                    this.signIn() // refresh local data
                }
            }).catch(({response:{data}})=>{
                this.do_show_popup_error(data.message)
            }).finally(()=>{
                this.processing = false
            })
        },
        async updStoreDetails(){
            this.processing = true
            await axios.post('/api/updstore_settings',this.store_settings).then(({data}) => {

                if (!data.success) {
                    this.do_show_popup_error(data.message)
                } else {
                    this.do_show_popup_success(data.message)
                    this.signIn() // refresh local data
                }
            }).catch(({response:{data}})=>{
                this.do_show_popup_error(data.message)
            }).finally(()=>{
                this.processing = false
            })
        },
        async updStoreCats() {
            this.processing = true
            await axios.post('/api/updstore_cats',this.store_cats).then(({data}) => {

                if (!data.success) {
                    this.do_show_popup_error(data.message)
                } else {
                    this.do_show_popup_success(data.message)
                    this.signIn() // refresh local data
                }
            }).catch(({response:{data}})=>{
                this.do_show_popup_error(data.message)
            }).finally(()=>{
                this.processing = false
            })
        },
        async getAvailStoreCats(){
            this.processing = true
            await axios.get('/api/get_avail_store_cats').then(({data}) => {

                if (!data.success) {
                } else {
                    this.avail_store_cats = data.avail_store_cats
                }
            }).catch(({response:{data}})=>{
                this.do_show_popup_error(data.message)
            }).finally(()=>{
                this.processing = false
            })
        }
    }
}`

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[may-96]

Did you find any solution? I'm facing the exactly same issue.

It doesn't work if pre-selected value is an object or an array of object. If pre-selected values are array of strings or string then it works fine. This issue occurs for both single and multiple select.

[soc221b]

Please refer to this discussion: https://github.com/iendeavor/vue-next-select/discussions/227#discussioncomment-897848