API Reference / Vue InstantSearch Widgets / ais-state-results

ais-state-results

Widget signature 
<ais-state-results />
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 />

Customize the UI

default

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

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.
Copy 
1
2
3
4
5
6
7
8

<ais-state-results>
  <p
    slot-scope="{ state: { query }, results: { hits } }"
    v-show="!hits.length"
  >
    No results found for the query: <q>{{ query }}</q>
  </p>
</ais-state-results>

Did you find this page helpful?

Vue InstantSearch v3