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.
Customize the UI
default
|
The slot to override the complete DOM output of the widget.
Scope
Here is a non exhaustive list of attributes that you get on the scope. You can find more information about those attributes on the response format page.
_rawResults: object[]: the raw response from the Algolia API.query: string: the value of the query.hits: object[]: the records that matched the search.index: string: the name of index tagerted by search.hitsPerPage: number: the maximum number of hits returned per page.nbHits: number: the number of hits matched by the query.nbPages: number: the number of pages returned. Calculation is based on the total number of hits (nbHits) divided by the number of hits per page (hitsPerPage), rounded up to the nearest integer.page: number: the index of the current page (zero-based).processingTimeMS: number: the time the server took to process the request, in milliseconds. This does not include network time.exhaustiveFacetsCount: boolean: whether the facet count is exhaustive (true) or approximate (false).exhaustiveNbHits: boolean: whether the nbHits is exhaustive (true) or approximate (false). An approximation is done when the query takes more than 50ms to be processed (this can happen when using complex filters on millions of records).userData: object[]: array of userData objects. Only returned if at least one query rule containing a custom userData consequence was applied.queryID: string: used in click and conversion analytics, is returned when the clickAnalytics parameter is provided.disjunctiveFacets: object[]: a list of disjunctive facets applied to the search.hierarchicalFacets: object[]: a list of hierarchical facets applied to the search.facets: object[]: a list of conjonctive facets applied to the search.
|
1
2
3
4
5
| <ais-state-results>
<p slot-scope="{ query, hits }" v-if="!hits.length">
No results found for the query: <q>{{ query }}</q>
</p>
</ais-state-results>
|
1
2
3
4
5
6
7
8
9
| <ais-state-results>
<div slot-scope="{ userData }">
<img
v-for="item in userData"
:key="item.source"
:src="'https://example.com/images/' + item.source"
/>
</div>
</ais-state-results>
|
|
