Блог

У меня есть приложение Vue, которое использует multiselect, я хочу, чтобы оно было таким, чтобы было 5 вариантов (a, b, c, d, e), и пользователь мог выбрать максимум 3. Я проверил документы, и это, похоже, не является поддерживаемым параметром, поскольку ограничение, о котором он упоминает, просто ограничивает количество видимых после выбора.

Вот мой текущий код, но он не делает то, что я хочу

Данные:

 selectedOptions: [],
optionsLimit: 3,
optionsList: ["a","b","c","d","e",]
  

Шаблон:

 <multiselect v-model="selectedOptions" :multiple="true" :options="optionsList" :hide-selected="true"></multiselect>
  

Текущее поведение:

Позволит выбрать все 5 вариантов вместо ограничения 3.

Как я могу сделать так, чтобы пользователь мог выбрать максимум 3 варианта?

Для этого вы можете использовать max prop:

Шаблон:

 <multiselect v-model="selectedOptions" :multiple="true" :options="optionsList" :hide-selected="true" :max="3"></multiselect>

  

Вы можете использовать функцию отключения , чтобы отключить использование множественного :disabled="selectedOptions.length>=optionsLimit" выбора . Приведенный ниже код:

 // register globally
Vue.component('multiselect', window.VueMultiselect.default)

new Vue({
  el: '#app',
  data: {
    selectedOptions: [],
    optionsLimit: 3,
    optionsList: ["a", "b", "c", "d", "e", ]
  },
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">

  <multiselect v-model=selectedOptions :multiple="true" :options="optionsList" :hide-selected="true" :disabled="selectedOptions.length>=optionsLimit"></multiselect>

</div>