Disabling select based on a boolean

[ishiki-arata]

I need to make the select disabled or enabled when I have activeEdit: true or false.

:disabled="!activeEdit"

I tried adding this to the but it does not work. Also tried readonly instead of disabled, doesn't work either. Any clue how to go around this?

Thank you!

[ishiki-arata]

Help please :)

[desislavsd]

Hey @ishiki-arata, truly sorry for the delayed response.

I thought this is covered but apparently there is an issue. The query input is disabled but the dropdown opens. I will definitely fix that but until then you can achieve the desired effect in a few ways:

1. Apply pointer-events: none to prevent mouse interaction with the select. One will still be able to focus/open it using keyboard navigation with tab key though. Therefore option 2:

2. During registration of the plugin you may override the open method to make it aware of the disabled attr:

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

Vue.use(VueSelect, {
    mixin: {
        methods: {
            // override the default `open` method
            open() {
                // prevent opening the dropdown if $attrs.disabled == true
                if (this.$attrs.disabled) return this.close();

                // otherwise call the original method we may take from the original 
                // vSelect component definition ( standard Vue component definition that has methods )
                return vSelect.methods.open.apply(this, arguments)
            },
        },
    },
})

3. Is to customize the layout of the component but it will get too advanced ;)

For best results one may apply a combination of multiple strategies.

Sorry again, I really had some tough days! Wish you all the best!