Render Pagination conditionally

Hey there, I’m a newbie to Vue and Vue InstantSearch but is there a way to conditionally render the pagination based on results? I would like to hide pagination when filtered down there is only one page of results.

1 Like

Hi @jhamilton,

Vue InstantSearch package a no-result component. It’ll allow you to display a specific content when there’re no results. Unfortunately this doesn’t match your use case which is “hide the pagination when only one page”.

We don’t have yet a specific API to handle conditional display other than when no results but you can achieve what you want by creating your own custom conditional component.

Here is the documentation: https://community.algolia.com/vue-instantsearch/getting-started/custom-components.html

And here a little code example:

<template>
  <ais-index :searchStore="searchStore">
    <ais-pagination v-show="searchStore.totalPages > 1"></ais-pagination>
  </ais-index>
</template>
<script>
import { createFromAlgoliaCredentials } from "vue-instantsearch";

searchStore = createFromAlgoliaCredentials("appid", "apikey");
searchStore.indexName = "indexname";

export default {
  data() {
    return {
      searchStore
    };
  }
};
</script>

Will that work for you?

1 Like

Thank you @marielaure.thuret! That did exactly what I was looking for.