SelectedFilters

Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.

The default slot renders the length of the selected filters array. The property "alwaysVisible" handles if the component is rendered if no filters are selected.

Props

Name	Description	Type	Default
facetsIds	Array of facets ids used to get the selected filters for those facets.	Array
alwaysVisible	Flag to render the component even if there are no filters selected.	boolean	false

Slots

Name	Description	Bindings (name - type - description)
default

Examples

Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.

The default slot renders the length of the selected filters array.

Basic usage

<SelectedFilters />

Always visible

If "alwaysVisible" is true, the component is rendered no matter if there are some filter selected. If "alwaysVisible" is false (default), the component is rendered if there are some filter selected.

<SelectedFilters />

Output:

<div class="x-selected-filters">1</div>

Customizing its content

In this example, renders a custom message using the default scoped slot.

<SelectedFilters>
  <template #default="{ selectedFilters }">
    Selected filters: {{ selectedFilters.length }}
  </template>
</SelectedFilters>

Output:

<div class="x-selected-filters">Selected filters: 1</div>

In this example, the selected filters are filtered by the facetsIds property.

<SelectedFilters :facetsIds="['brand_facet']" />

<SelectedFilters :facetsIds="['brand_facet', 'gender_facet']">
  <template #default="{ selectedFilters }">
    Selected filters: {{ selectedFilters.length }}
  </template>
</SelectedFilters>