t×tecexpressby TeKOcloud
ENv0.7.1
Eingaben & Auswahl / VUE

TxLookup.

Interaktive Vorschau

Suchbare Einzelwahl mit nachladbarer Datenquelle.

PropTypStandardBedeutung
itemsTxEntry[] | undefined[]Einträge; bei Datenbindung durch dataSource ersetzt.
dataSourceTxSource<TxEntry> | undefinedundefinedListe, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
disabledboolean | undefinedfalseSperrt die Interaktion.
labelstring | undefinedundefinedBeschriftung beziehungsweise zugänglicher Name.
modelValueanyundefinedKontrollierter Wert für v-model.
placeholderstring | undefinedAuswählen …Hinweis bei leerer Eingabe.
searchEnabledboolean | undefinedtrueAktiviert die Suche.
acceptCustomValueboolean | undefinedfalseErlaubt eigene Einträge.
showSelectionControlsboolean | undefinedfalseZeigt Mehrfachauswahl-/Alle-Steuerelemente.
showClearButtonboolean | undefinedtrueZeigt die Aktion zum Leeren.
maxDisplayedTagsnumber | undefined4Maximal sichtbare Tags vor der Zusammenfassung.
applyValueModestring | undefinedinstantlyÜbernahme sofort oder über Bestätigung.

Ereignisse

EventPayload / Verhalten
update:modelValueNeuer Wert von modelValue; über v-model:modelValue übernehmen (modelValue: v-model).
valueChangedNeuer Wert in { value }; Editoren liefern zusätzlich previousValue und event.
customItemCreatingEigener Text in { text }; eigenen Eintrag über die Anwendung ergänzen.

Slots

SlotArgumente
item{ item }
vue
<script setup lang="ts">
import { ref } from 'vue'
import { TxLookup } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const choice = ref(1)
</script>

<template>
  <TxLookup v-model="choice" :items="[{ value: 1, text: 'One' }]" />
</template>