Prevent selecting any items when using single select (object)

masoud86 commented 3 years ago

I'm using Vue-multiselect 2.1.4

It works like a charm when I use single select with array options. But in case of using single select with array of objects, all items are green and they are not selectable! (They have "is-selected" class)

To clarify the problem, I used the sample code from the project website and replace the options with my data.

vue-multiselect-problem

<multiselect v-model="value" deselect-label="Can't remove this value"
    track-by="name" label="name" placeholder="Select one"
    :options="options" :searchable="false" :allow-empty="false">
    <template slot="singleLabel" slot-scope="{ option }">
        <strong>{{ option.name }}</strong> is written in
        <strong>  {{ option.language }}</strong>
    </template>
</multiselect>

const config = {
    data() {
        return {
            value: null,
            options: []
        }
    },
    async mounted() {
        await this.getTerminals();
    },
    methods: {
        async getTerminals() {
            await window.axios.get("/api/Operation/GetTerminals")
                .then(resp => {
                    this.$data.options = resp.data;
                })
                .catch(err => {
                    console.error(err);
                });
            },
    }
};
const app = Vue.createApp(config);
app.component('Multiselect', VueformMultiselect);
app.mount('#app');