Ali GOREN

Open Source, JavaScript, Python, .NET

Vue Multiselect Single Deselect Problem

| Permalink

Hi there!

I was getting an error when I try to remove single selection on Vue Multiselect dropdown.

To solve this problem, I’ve created a mixin.

I called the multi-select component like that;

<multiselect 
        id="sender"
        selectedLabel="Selected"
        track-by="ID"
        label="ID"
        :selectLabel="selectConfig.selectLabel"
        :deselectLabel="selectConfig.deselectLabel"
        :placeholder="selectConfig.smsSender.placeholder" 
        :custom-label="({senderName}) => senderName"
        @remove="(val) => removeSelect('smsSender')"
        @input="(val) => inputSelect(val, 'smsSender')"
        :value="setDeselect(selectConfig.smsSender.optionsProxy)" 
        :options="selectConfig.smsSender.options"></multiselect>

This was my global mixin. Because I used multi-select component multiple times.

export const multiSelectDeselect = {
    data() {
        return {

        }
    },
    created() {
    },
    methods: {
        setDeselect(data) {
            return data[0] ? data : [];
        }
    }
}

Vue.mixin(multiSelectDeselect)

I returned data like above because data[0] is null when you try to hit enter to remove the selection. If data[0] is null, the multi-select component will fire an error.

I used like that;

 :value="setDeselect(selectConfig.smsSender.optionsProxy)"

That’s all. I hope this will help you ­čÖé