Как ограничить выбранные элементы в vue-select?

Я использую vue-select для нескольких значений. Вот пример: https://codepen.io/sagalbot/pen/opMGro

У меня есть следующий код:

<v-select multiple v-model="selected" :options="options"></v-select>

И JS:

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    selected: ['foo','bar'],
    options: ['foo','bar','baz']
  }

Спасибо!

Источник

2 ответа

Решение

Вы можете использовать v-on:input слушатель, чтобы увидеть, сколько предметов выбрано.

Затем передайте ему простую функцию как:

 <v-select multiple v-model="selected" :options="options" v-on:input="limiter"></v-select>

После этого создайте функцию с именем limiter в ваших методах, и вы получите текущий список выбранных входов, а

  methods: {
    limiter(e) {
      if(e.length > 2) {
        console.log(' you can only select two', e)
        e.pop()
      }
    },
  }

Теперь, если вы добавите более двух элементов, последний будет удален, и вы увидите журнал консоли.

Вот рабочий пример: https://codepen.io/samayo/pen/QmLwQV

Источник

Вы можете просто использовать встроенное условие:

<v-select multiple v-model="selected" :options="selected.length < 2 ? options: []">

Я ограничил 2 варианта в примере выше. Опции не будут сгенерированы, если выбраны 2 опции. Удалите выбранный, и вы увидите выпадающий список параметров.

Вот обновленная демка.

Источник

Ты можешь использовать

:selectable="() => selected.length < 3"

из официальной документации https://vue-select.org/guide/selectable.html

Источник
Другие вопросы по тегам