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