@empathyco/x-components
Version:
Empathy X Components
66 lines (46 loc) • 1.57 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 setup>
import { PreselectedFilters } from "@empathyco/x-components";
import { provide } from "vue";
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 setup>
import { PreselectedFilters } from "@empathyco/x-components";
import { ref } from "vue";
const filters = ref([
'{!tag=brand_facet}brand_facet:"Lego"',
'{!tag=age_facet}age_facet:"toddler"',
]);
</script>
```