I’m converting a search page from Vue AIS v1 to v2.
ais-refinement-list had a slot to include a heading which would be hidden along with the rest of the component when no refinements were available.
I’m trying to recreate this on v2 but am running into some issues. Since the
ais-refinement-list no longer has a header slot I understand that I now need to wrap the
ais-refinement-list component in a
ais-panel component. The docs explain that the
ais-panel should inherit a class from the child
ais-refinement-list to indicate when there are no refinements
ais-Panel--noRefinement, but I can’t seem to get this working.
This is the code I’m using:
<ais-panel> <h3 slot="header">Historic categories</h3> <ais-refinement-list attribute="historic_categories" :sort-by="['count:desc', 'name:asc']" :operator="'and'" /> </ais-panel>