Vue-multiselect prevent selecting any items when using Single select (object)

user_2549298 0
Viewed 772

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.

enter image description here

<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');
vue-multiselect vue.js
2 Answers

In case of array of objects, first you need to populate the values in object and then push the object in options array. And there will be few changes in the template as well. For example if your object is like this, following will work:

        data(){
    return{
     value: null,
     option: {
       value: "",
       name: "",
       icon: "",
     },
     options: [],
    }
    },

methods: {
getData(){
//call your service here
response.data.list.forEach((item, index) => {
            self.option.value = item.first_name + item.last_name;
            self.option.name = item.first_name + " " + item.last_name;
            self.option.icon =
              typeof item.avatar !== "undefined" && item.avatar != null
                ? item.avatar
                : this.$assetPath + "images/userpic-placeholder.svg";
            self.options.push({ ...self.option });
          });
}
}

Then in the template fill the options like this:

            <Multiselect
                v-model="value"
                deselect-label="Can't remove this value"
                track-by="value"
                label="name"
                :options="options"
                :searchable="false"
                :allow-empty="false"
              >
                <template v-slot:singlelabel="{ value }">
                  <div class="multiselect-single-label">
                    <img class="character-label-icon" :src="value.icon" />
                    {{ value.name }}
                  </div>
                </template>

                <template v-slot:option="{ option }">
                  <img class="character-option-icon" :src="option.icon" />
                  {{ option.name }}
                </template>
              </Multiselect>

Call your getData() function in created hook.

user_140146520

For me the solution was to use the "name" and "value" keys for my object. Anything else and it doesn't work (even if they use different keys in the documenation). This seems like a bug, but that was the only change I needed to make.

user_87084840
Related