API Reference / Vue InstantSearch / ais-clear-refinements

ais-clear-refinements

A
Signature 
<ais-clear-refinements
  // Optional parameters
  :excluded-attributes="string[]"
  :included-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>
See code examples
See live example

About this widget # A

The ais-clear-refinements widget displays a button that lets the user clears every currently applied refinement.

Examples # A

Copy 
1

<ais-clear-refinements />

Props # A

excluded-attributes #
type: string[]
default: ["query"]
Optional

The attributes to exclude from the refinements to clear. In the example below, the attribute brand is excluded from the refinements to clear.

This can’t be used with included-attributes.
Copy 
1
2
3

<ais-clear-refinements
  :excluded-attributes="['brand']"
/>
included-attributes #
type: string[]
default: []
Optional

The attributes to include in the refinements to clear (all by default). In the example below, only the categories attribute is included in the refinements to clear.

This can’t be used with excluded-attributes.
Copy 
1
2
3

<ais-clear-refinements
  :included-attributes="['categories']"
/>
transform-items #
type: function
default: items => items
Optional

Receives the items to clear, and is called before clearing them. Should return a new array with the same shape as the original array. Useful for filtering items.

In addition, the full results data is available, which includes all regular response parameters, as well as parameters from the helper (for example disjunctiveFacetsRefinements).

When using an array, take steps to avoid creating infinite loops. When you use an array as a prop, it causes the widget to re-register on every render, and this can sometimes cause these infinite loops.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <!-- ... -->
  <ais-current-refinements :transform-items="transformItems" />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.sort(item => item.attribute);
      },

      /* or, combined with results */
      transformItems(items, { results }) {
        return results.nbHits === 0
          ? items
          : items.filter(item => item !== 'brand');
      },
    },
  };
</script>
class-names #
type: object
default: {}
Optional

The CSS classes to override.

  • ais-ClearRefinements: the root container of the widget.
  • ais-ClearRefinements-button: the button of the widget.
  • ais-ClearRefinements-button--disabled: the disabled button of the widget.
Copy 
1
2
3
4
5
6
7

<ais-clear-refinements
  :class-names="{
    'ais-ClearRefinements': 'MyCustomClearRefinements',
    'ais-ClearRefinements-button': 'MyCustomClearRefinementsButton',
    // ...
  }"
/>

Customize the UI # A

default #

The slot to override the complete DOM output of the widget.

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

Scope#

  • canRefine: boolean: are there any refinements?
  • refine: () => void: the function to clear all the refinements.
  • createURL: () => string: the function to return a link for the search without the refinements.
Copy 
1
2
3
4
5
6
7
8
9
10
11

<ais-clear-refinements>
  <template v-slot="{ canRefine, refine, createURL }">
    <a
      :href="createURL()"
      @click.prevent="refine"
      v-if="canRefine"
    >
      Clear all refinements
    </a>
  </template>
</ais-clear-refinements>
resetLabel #

The slot to override the DOM output for the label of the reset button.
Copy 
1
2
3

<ais-clear-refinements>
  <template v-slot:resetLabel>Clear refinements</template>
</ais-clear-refinements>

HTML output# A

Copy 
1
2
3
4
5

<div class="ais-ClearRefinements">
  <button class="ais-ClearRefinements-button">
    Clear refinements
  </button>
</div>
Did you find this page helpful?
Vue InstantSearch v4