Lookup

Menu component with a text input and a menu of options.

Options will depend on the current value of the input. Typical use will involve listening for new-input events, fetching or otherwise computing options, then passing those options back to the Lookup for display.

TextInput props apply

This component contains a TextInput component. You can bind TextInput props to this component and they will be passed to the TextInput within.

Attributes passed to input

This component will pass any HTML attributes applied to it, except for CSS class, to the <input> element within the component.

Demos

Default

The Lookup component will emit new-input events on input, which the parent component can react to by computing or fetching options, then providing those options to the Lookup component for display.

Note that in this example, options are Wikidata items with a human-readable label and a Wikidata entity ID value.

The current value is:

With custom option format

The menu-option slot can be used to set up custom option content and formatting.

The footer slot can be used to display non-interactive content below the final option. For example, a "no result found" message can be conditionally displayed.

With fetched results

Often, a Lookup component is used to fetch results from an API endpoint. Parent components can react to the new-input event emitted by Lookup to search for results, then pass back to the Lookup either an array of results to display as options or an empty array if there are no results. Between those two events, a pending state animation will display in the input.

Clearable, with start icon

Props of the TextInput component can be bound to Lookup and will be passed down to the TextInput component inside of it, so you can take advantage of features like the "clear" button and icons.

With placeholder

Attributes (except for class) will fall through to the input element, so you can set things like placeholder on the Lookup component and they'll be applied to the input.

Usage

Props

Prop nameDescriptionTypeValuesDefault
modelValueValue of the selection provided by v-model binding in the parent component.string|number|null-
optionsMenu options.MenuOption[]-() => []
initialInputValueInitial value of the text input.string|number-''
disabledWhether the entire component is disabled.boolean-false

Events

Event namePropertiesDescription
update:modelValuevalue string | number - The new valueWhen the selected value changes.
new-inputvalue string | number - The new valueWhen the text input value changes.

Slots

NameDescriptionBindings
menu-optionDisplay of an individual option in the menuoption MenuOption - The current option
footerContent to display at the end of the options list

Last updated: