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
filters	A list of filters to preselect.	string[]	() => []

Events

A list of events that the component will emit:

PreselectedFiltersProvided (opens new window).

Examples

See how the event is triggered when the component is rendered.

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

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