WeSelect

A powerful select/autocomplete component that extends Vuetify's v-autocomplete with built-in API data fetching, pagination, object handling, and other advanced features.

Usage

<template>
  <!-- Basic usage -->
  <WeSelect
    v-model="selectedValue"
    label="Service"
    resource="services"
  />
  
  <!-- With object value binding -->
  <WeSelect
    v-model="selectedId"
    v-model:object-value="selectedObject"
    label="User"
    resource="users"
    item-text="full_name"
    return-object
  />
  
  <!-- With pagination -->
  <WeSelect
    v-model="selectedUser"
    label="User"
    resource="users"
    item-text="full_name"
    paginate
  />
  
  <!-- Multiple selection -->
  <WeSelect
    v-model="selectedServices"
    multiple
    label="Services"
    resource="services"
  />

  <!-- redirect -->
   <WeSelect
    v-model="redirectValue"
    resource="services"
    @redirect="redirectTo"
  />

  <!-- custom slot selection -->

   <WeSelect
    v-model="autoMultiple"
    label="custom selection"
    resource="services"
    chips
    auto-select="first"
    multiple
  >
    <template #chip="a">
      aaa <v-chip v-bind="a" />
    </template>
  </WeSelect>
</template>

Props

Prop	Type	Default	Description
resource	String	undefined	API resource path to fetch items from
modelValue	String | Object | Array | Boolean | Number	undefined	v-model value
objectValue	String | Object | Array | Boolean | Number	null	Contains the ID value(s) when using v-model:object-value, not the full object
returnObject	Boolean	false	Whether to return the full object instead of just the ID
extraParams	Object	{}	Additional parameters for the API request
itemValue	String	'id'	Property name to use as the value
itemTitle	String | Function	'title'	Property name or function to use as display title. If both itemTitle and itemText are provided, the component will display the value from itemTitle and ignore itemText
itemText	String | Function	'name'	Property name or function to use as display text
clearable	Boolean	true	Whether the field can be cleared
paginate	Boolean | Object	false	Whether to use pagination and pagination options
multiple	Boolean	false	Whether to allow multiple selections
searchAsItem	Boolean	false	Whether to include search text as an item
lazy	Boolean	false	Whether to use lazy loading/caching for API requests
autoSelect	String | Function	undefined	Auto selection mode: 'first', 'only-option', or custom function
onRedirect	Function	undefined	Triggered when the user clicks the redirect button inside the select. The button (shown in the prepend-inner slot) appears only if onRedirect is defined, and the component emits a redirect event.
waitForInteraction	Boolean	false	If set to true, the component will delay API requests and item fetching until the user has interacted with the dropdown or search field. Useful to avoid unnecessary network calls for selects that may never be opened

Note: The component also accepts all Vuetify v-autocomplete props through v-bind="$attrs"

Events

Event	Payload	Description
update:modelValue	any	Emitted when the model value changes
update:object-value	any	Emitted when the object value changes (when using v-model:object-value)
error	Error	Emitted when an error occurs during API request

Slots

Name	Props	Description
item	{ item, props, index }	Custom template for each item
search-item	{ value }	Custom template for the search item when searchAsItem is true
other	{ value }	Custom template for any slot

Features

• API Integration: Automatically fetches data from specified API resource
• Dual Model Binding: Supports both value and object value binding
• Infinite Scrolling: Built-in pagination with infinite scroll loading
• Auto Selection: Can automatically select first item or based on custom logic
• Server-Side Search: Search functionality when using pagination
• Lazy Loading: Optional request caching for improved performance

Examples

Basic Usage

<script setup>
const selectedService = ref(null)
</script>

<template>
  <WeSelect
    v-model="selectedService"
    label="Select a service"
    resource="services"
  />
</template>

Return Object vs Value Only

<script setup>
const returnObject = ref({
  value: null,      // Will contain the full object when returnObject is true
  objectValue: null // Will contain just the ID value
})
</script>

<template>
  <WeSelect
    v-model="returnObject.value"
    v-model:object-value="returnObject.objectValue"
    label="Service with object value"
    resource="services"
    return-object
  />
</template>

Paginated Selection

<script setup>
const paginatedUser = ref(null)
</script>

<template>
  <WeSelect
    v-model="paginatedUser"
    label="Find a user (with pagination)"
    resource="users"
    item-text="full_name"
    paginate
  />
</template>

Multiple Selection

<script setup>
const multipleServices = ref([])
</script>

<template>
  <WeSelect
    v-model="multipleServices"
    multiple
    label="Select multiple services"
    resource="services"
  />
</template>

Lazy Loading

<script setup>
const lazySelection = ref(null)
</script>

<template>
  <WeSelect
    v-model="lazySelection"
    label="Cached selection"
    resource="beacons"
    :paginate="false"
    lazy
  />
</template>

Auto Selection

<script setup>
// Auto-select first item
const autoSelectFirst = ref(null)

// Auto-select with custom function
const autoSelectCustom = ref([])
</script>

<template>
  <!-- Automatically select first item -->
  <WeSelect
    v-model="autoSelectFirst"
    label="Auto-select first"
    resource="services"
    auto-select="first"
  />
  
  <!-- Automatically select items using a custom function -->
  <WeSelect
    v-model="autoSelectCustom"
    label="Auto-select custom"
    resource="services"
    chips
    multiple
    :auto-select="(item, index) => index < 3"
  />
</template>

Source Code