Блог

Я использую Vue-многозначный выбор 2.1.4

Это работает как заклинание, когда я использую одиночный выбор с параметрами массива. Но в случае использования одного выбора с массивом объектов все элементы являются зелеными и их нельзя выбрать! (У них есть класс «is-selected»)

Чтобы прояснить проблему, я использовал пример кода с веб-сайта проекта и заменил параметры своими данными.

 <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');
 

В случае массива объектов сначала вам нужно заполнить значения в объекте, а затем поместить объект в массив параметров. И в шаблоне также будет немного изменений. Например, если ваш объект выглядит следующим образом, будет работать следующее:

         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" amp;amp; item.avatar != null
                ? item.avatar
                : this.$assetPath   "images/userpic-placeholder.svg";
            self.options.push({ ...self.option });
          });
}
}
 

Затем в шаблоне заполните параметры следующим образом:

             <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>
 

Вызовите функцию getData() в созданном крюке.