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

See it in action

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

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

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