Vs Vue3 Select

Открытие списка

Поведение по умолчанию

По умолчанию выпадающий список открывается, когда строка поиска получает фокус. Так же список открывается при нажатии или когда получает фокус при переходе табуляцией.

Кастомизация поведения

Параметр dropdownShouldOpen позволяет полностью настроить алгоритм открытия/закрытия. Опция принимает функцию, которая должна возвращать логическое значение. Возвращаемое логическое значение будет использоваться для определения того, должен ли выпадающий список быть открытым (true) или закрытым (false). Функция получает экземпляр компонента в качестве единственного аргумента.

Пример: Открывать выпадающий список, когда строка поиска не пустая

В этом примере список не отображается до тех пор, пока пользователь не начнет вводить текст. Однако, если элемент уже выбран, выпадающий список отображается сразу.

<template>
  <v-select
    :options="countries"
    v-model="country"
    :dropdown-should-open="dropdownShouldOpen"
  />
</template>

<script setup>
import countries from '../data/countries.js'
import { ref } from 'vue'

const country = ref(null)
const dropdownShouldOpen = (vm) => {
  if (country.value !== null) {
    return vm.open
  }
  return vm.search.length !== 0 && vm.open
}
</script>