UI libraries / Vue InstantSearch / Widgets

ais-clear-refinements

Signature 
<ais-clear-refinements
  // Optional parameters
  :excluded-attributes="string[]"
  :included-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisClearRefinements } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisClearRefinements
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples
See live example

About this widget

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

Examples

Copy 
1

<ais-clear-refinements />

Props

Parameter Description
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 you can 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

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

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