@empathyco/x-components
Version:
Empathy X Components
74 lines (56 loc) • 1.72 kB
Markdown
---
title: PreselectedFilters
---
# PreselectedFilters
This component emits FacetsXEvents.PreselectedFiltersProvided when a preselected filter
is set in the snippet config or by using the prop of the component.
## Props
| Name | Description | Type | Default |
| -------------------- | ------------------------------- | --------------------- | --------------------- |
| <code>filters</code> | A list of filters to preselect. | <code>string[]</code> | <code>() => []</code> |
## Events
A list of events that the component will emit:
[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).
## See it in action
_See how the event is triggered when the component is rendered._
```vue
<template>
<PreselectedFilters />
</template>
<script>
import { PreselectedFilters } from '@empathyco/x-components'
export default {
name: 'PreselectedFiltersDemo',
components: {
PreselectedFilters,
},
provide: {
snippetConfig: {
filters: ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'],
},
},
}
</script>
```
### Play with props
In this example, the preselected filters have been configured to use a list of configured filters by
prop:
```vue
<template>
<PreselectedFilters :filters="filters" />
</template>
<script>
import { PreselectedFilters } from '@empathyco/x-components'
export default {
name: 'PreselectedFiltersDemo',
components: {
PreselectedFilters,
},
computed: {
filters() {
return ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"']
},
},
}
</script>
```