Vs Vue3 Select

Ограничение выбора

Параметр Selectable

Параметр selectable определяет, является ли опция выбираемой или нет. Если selectable возвращает значение false для данной опции, она будет отображаться с классом vs__dropdown-option--disabled. Опция будет отключена и ее невозможно будет выбрать.

selectable: {
  type: Function,
  /**
   * @param {Object|String} option
   * @return {boolean}
   */
  default: option => true,
},

В примере selectable используется для предотвращения выбора книг определенного автора. Параметры, передаваемые компоненту, являются объектами:

{
  "title": "Right Ho Jeeves",
  "author": { "firstName": "P.D", "lastName": "Woodhouse" }
}

Этот объект будет передан в selectable, чтобы мы могли проверить, должен ли автор быть выбранным или нет.

<template>
  <v-select
      placeholder="Choose a book to read"
      label="title"
      :options="books"
      :selectable="(option) => !option.author.lastName.includes('Woodhouse')"
  />
</template>





 


Ограничения количества выбранных опций

selectable также может быть использована, чтобы ограничить количество вариантов, которые могут быть выбраны в компоненте. В этом случае пользователь может выбрать любого автора, но может выбрать максимум три книги.

<template>
  <v-select
    v-model="selected"
    multiple
    placeholder="Choose up to 3 books!"
    label="title"
    :options="books"
    :selectable="() => selected.length < 3"
  />
</template>