UI libraries / Vue InstantSearch / Widgets

ais-state-results

Signature 
<ais-state-results 
  // Optional parameters
  :catch-error="boolean"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

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

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

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-state-results allows you reach into the current search state, for example, for conditional rendering or other rendering that depends on what the current refinement or results are.

Examples

Copy 
1

<ais-state-results />

Props

Parameter Description
catch-error
type: boolean
default: false

If true, errors thrown by InstantSearch are handled by InstantSearch and are available in the error property from the slot. Set catch-error to false if you want to handle these errors elsewhere.

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

The scope is an object with the keys state and results.

state

  • query: string: the current value of the query.
  • page: number: the currently applied page.
  • … any other currently applied search parameters.

You can find all regular parameters on the search parameters page.

Note that this also includes parameters from the Helper, e.g., disjunctiveFacetsRefinements.

results

  • _rawResults: object[]: the raw response from the Algolia API.
  • query: string: the value of the query from the latest response.
  • hits: object[]: matching hits from the latest response. _ … any other values from the latest response.

You can find all regular response parameters on the response format page.

Note that this also includes parameters from the Helper, e.g. disjunctiveFacetsRefinements.

status

The status is a string which can be idle, loading, stalled, or error. To display a loading indicator, prefer using stalled, as loading happens for a short amount of time only.

error

If the status is error, there is also an error object available in the scope.
Copy 
1
2
3
4
5
6
7

<ais-state-results>
  <template v-slot="{ state: { query }, results: { hits } }">
    <div v-show="!hits.length">
      No results found for the query: <q>{{ query }}</q>
    </div> 
  </template>
</ais-state-results>
Did you find this page helpful?
Vue InstantSearch v4