ClearFilters

Renders a simple button, emitting the needed events when clicked.

Props

Name	Description	Type	Default
facetsIds	Array of facets ids used to get the selected filters for those facets.	Array<Facet['id']>
alwaysVisible	Flag to render the component even if there are no filters selected.	boolean

Slots

Name	Description	Bindings (name - type - description)
default

Events

A list of events that the component will emit:

• UserClickedClearAllFilters (opens new window): the event is emitted after the user clicks the button to clear a certain facets filter. The event payload is the id of the facets that are going to be cleared.
• UserClickedClearAllFilters (opens new window): the event is emitted after the user clicks the button. The event payload is undefined.

Examples

This component renders a button, which on clicked emits the UserClickedClearAllFilters or UserClickedClearAllFilters event.

Basic usage

<ClearFilters />

Customizing its contents

In this example, show the custom message in button.

<ClearFilters v-slot="{ selectedFilters }">
  Delete {{ selectedFilters.length }} selected
</ClearFilters>

In this example, show the custom message in button with always visible a true and list of facets ids.

<ClearFilters v-slot="{ selectedFilters }" :alwaysVisible="true" :facetsIds="facetsIds">
  Delete {{ selectedFilters.length }} selected
</ClearFilters>