2 min read



This component renders a history query suggestion combining two buttons: one for selecting this suggestion as the search query, and another one to remove this query suggestion from the history queries.


Name Description Type Default
suggestion The history query suggestion to render. HistoryQueryModel


Event name Properties Description
click suggestion Suggestion - History Query suggestion data
event MouseEvent - The original mouse event
Click on the History Query suggestion


Name Description Bindings
(name - type - description)
default History Query content v-bind Object - BaseSuggestion default slot scope: suggestion Suggestion - Suggestion data
query string - The query that the suggestion belongs to
filter Filter or undefined - Suggestion's filter
remove-button-content History Query remove button content suggestion Suggestion - History Query suggestion data


A list of events that the component will emit:


Basic usage

This component only requires a prop called suggestion

Customizing slots content

Suggestion and remove buttons contents can be customized.

The default slot allows you to replace the content of the suggestion button. It has two properties, the suggestion itself, and a string of HTML with the matched query.

The other slot is called remove-button-content, and allows you to set the content of the button that serves to remove this query from the history. This slot only has one property, the suggestion.

Customizing the content with classes

The suggestionClass prop can be used to add classes to the history query suggestion.

The removeButtonClass prop can be used to add classes to the remove history query.