ais-clear-refinements

Signature

<ais-clear-refinements
  // Optional parameters
  :excluded-attributes="string[]"
  :included-attributes="string[]"
  :transform-items="function"
  :class-names="object"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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

Examples

Vue

<ais-clear-refinements />

Props

excluded-attributes

string[]

default:"['query']"

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.

Vue

<ais-clear-refinements
  :excluded-attributes="['brand']"
/>

included-attributes

string[]

default:"[]"

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.

Vue

<ais-clear-refinements
  :included-attributes="['categories']"
/>

transform-items

function

default:"items => items"

A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.

To prevent creating infinite loops, avoid passing arrays, objects, or functions directly in the template. These values aren’t referentially equal on each render, which causes the widget to re-register every time. Instead, define them in your component’s data option and reference them in the template.

Vue

<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

object

default:"{}"

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.

Vue

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

Customize the UI

default

The slot to override the complete DOM output of the widget.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.

Vue

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

Vue

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

HTML output

HTML

<div class="ais-ClearRefinements">
  <button class="ais-ClearRefinements-button">Clear refinements</button>
</div>

​Import

See this widget in action

​About this widget

​Examples

​Props

​Customize the UI

​HTML output

Import

About this widget

Examples

Props

Customize the UI

HTML output