Загрузка опций при помощи AJAX

Событие search вызывает обработчик из родительского компонента для загрузки опций при обновлении текста поиска. Обработчик может иметь два параметра:

• search {String} Текущая строка поиска
• loading {Function} Функция для переключения состояния загрузки с одним параметром типа boolean

<v-select @search="fetchOptions" />

/**
 * Вызывается когда изменен текст поиска
 *
 * @param search  {String}    Текущий текст поиска
 * @param loading {Function}	Переключает состояние загрузки
 */
fetchOptions (search, loading) {
    //  ... выполняется асинхронный запрос
},

Функция loading принимает логический параметр, который будет присвоен внутреннему свойству состояния загрузки компонента. Вызовите loading(true), чтобы установить свойству загрузки значение true - переключая индикатор загрузки. После завершения вашей асинхронной операции вызовите loading(false), чтобы отключить ее.

Запрет фильтрации

При загрузке свойств с сервера может оказаться полезным отключить фильтрацию на стороне клиента. Используйте параметр filterable для отключения.

Индикатор загрузки

Vs Vue3 Select содержит индикатор загрузки по умолчанию, но вы можете его переопределить при помощи слота spinner.

Рекомендации

Поскольку Vue.js не поставляется с функциональностью ajax как часть базовой библиотеки, вам решать как обрабатывать ajax запросы в вашем родительском компоненте.

Я рекомендую использовать для запросов к серверу axios или fetch().

Пример

Пример codepen example, объединяет все вышеперечисленные концепции и выполняет поиск в репозиториях GitHub. Он также использует слоты для некоторых переопределений