Componente Select

El componente Select te permite crear selectores de opciones personalizados con varias propiedades y opciones. Puedes utilizarlo para permitir a los usuarios seleccionar una o varias opciones de una lista.

Uso en Componentes

Utilizando en un Componente

Puedes utilizar el componente Select en tus componentes de la siguiente manera:

<template>
  <Select
    :placeholder="'Selecciona una opción'"
    :options="selectOptions"
    :multiple="true"
    :listen-select="true"
    :listen-remove="true"
    :listen-form="true"
    v-model:model-value="selectedValues"
    @select="handleSelect"
    @remove="handleRemove"
    @set-error="handleSelectError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const selectOptions = ref([
  { id: 1, name: 'Opción 1' },
  { id: 2, name: 'Opción 2' },
  { id: 3, name: 'Opción 3' }
]);

const selectedValues = ref([]);

// Métodos para manejar eventos
const handleSelect = (value) => {
  // Lógica para manejar la selección de opciones
};

const handleRemove = (value) => {
  // Lógica para manejar la eliminación de opciones seleccionadas
};

const handleSelectError = (hasError) => {
  // Lógica para manejar errores en el componente Select
};


</script>

Propiedades

Propiedad	Tipo	Valor por defecto	Descripción
placeholder	String		Texto de marcador de posición para el selector.
options	Array	[]	Opciones disponibles en el selector.
label	String	'nombre'	Etiqueta para cada opción.
trackBy	String	'id'	Campo para el seguimiento de las opciones.
searchable	Boolean		Búsqueda de opciones habilitada.
multiple	Boolean		Selección múltiple de opciones habilitada.
disabled	Boolean	false	Selector deshabilitado.
showLabels	Boolean	false	Mostrar etiquetas de selección y deselección.
selectLabel	String		Texto para etiqueta de selección.
deselectLabel	String		Texto para etiqueta de deselección.
listenSelect	Boolean		Escuchar evento de selección.
listenRemove	Boolean		Escuchar evento de eliminación.
listenForm	Boolean		Escuchar cambios en formulario que contiene selector.

Eventos

Evento	Parámetros	Descripción
update:model-value	value	Cambio en el valor del selector.
setError	value	Cambio en estado de error del selector.
select	value	Selección de una o varias opciones.
remove	value	Eliminación de una opción seleccionada.