Блог

Я использую пакет vue multiselect, и при использовании <multiselect> вместо традиционного <select> я сталкиваюсь с проблемой. В моем компоненте vue я передаю prop, который содержит массив объектов, и каждый из этих объектов имеет различные свойства. При традиционном выборе в vue вы можете перебирать массив, используя v-for , а затем передавать значение на основе object.id , есть ли способ сделать это с помощью пакета vue-multiselect? Не уверен, пытался ли кто-нибудь использовать это как часть формы раньше, но стоит спросить. Спасибо.

Мой файл Vue

 <multiselect
        v-model="users"
        :options="usersArray"
        :multiple="true"
        :clear-on-select="false"
        :preserve-search="false"
        placeholder="select users"
        label="name"
        track-by="name"
        :preselect-first="false"
        id="users"
        name="users[]"
    ></multiselect>


export default {
  props: {
    'usersArray': Array,
  },
  data(){
    return {
      users: [],
    }
  },
  

Вам необходимо настроить метку и параметры для множественного выбора. Для этого.

 :options="usersArray.map(user => user.id)" 
:custom-label="opt => usersArray.find(x => x.id == opt).name"
  

Рабочий фрагмент ниже :

 new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    users: [],
    usersArray: [{
        id: 1,
        name: "A"
      },
      {
        id: 2,
        name: "B"
      },
      {
        id: 3,
        name: "C"
      },
      {
        id: 4,
        name: "D"
      },
    ]
  },
}).$mount('#app')  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">
  <multiselect v-model="users" :options="usersArray.map(user => user.id)" :custom-label="opt => usersArray.find(x => x.id == opt).name" :multiple="true" :clear-on-select="false" :preserve-search="false">
  </multiselect>
  <pre>{{ users }}</pre>
</div>