SelectedFilters
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>