Options not changing when updated programmatically

[theashcodes]

I have three <vue-select/> components on a page. I am using the :from prop to supply a function that will load options based on the selected value from the first dropdown. But the options shown in the second dropdown is not updating while changing the options in first dropdown.

It works perfectly fine for the first time. Once the options are loaded, it is not changing on the subsequent changes.

[theashcodes]

Making the from non-static fixes this issue. But is there any option to invoke the function (to update options) while changing the first dropdown?

[desislavsd]

@theashcodes this certainly is something I have to make a default behavior. Till then though you can easily achieve it through one of the following steps, knowing that the component internally uses the .search method to update its options:

1. Make it default behavior for your app during plugin setup:

Vue.use(VueSelect, {
    name: 'vSelect',
    mixin: {
        watch: {
            from() {
                this.search(true) // force refresh options ( ignore cache )
            }
        }
    }
})

2. If you do not setup the plugin globally but you only use the component on demand you can still do the same:

import { vSelect } from '@desislavsd/vue-select'

vSelect = {
    mixins: [vSelect],
    watch: {
        from() {
            this.search(true)
        },
    },
}

export default {
    components: { vSelect },
}

3. You can also use $refs like so:

<template>
    <v-select ... @change="$refs.secondSelect.search(true)" />
    <v-select ... ref="secondSelect" />
</template>