Vue instant search: Stack search results from searchStore

In this example, Algolia increases the page number and stacks results on top of each other:

<ais-results :stack="true">

I’d like to recreate this, but I’m using a custom component:

import { Component } from "vue-instantsearch"; 

export default {
  components: { "v-image": VImage },
  mixins: [Component],
  computed: {
    results() {
      return this.searchStore.results;
    },
    rows() {
      var arr = this.results;
      var len = 3;
      var chunks = [],
        i = 0,
        n = arr.length;
      while (i < n) {
        chunks.push(arr.slice(i, (i += len)));
      }
      return chunks;
    }
  }
};

Is there any way I can set the :stack="true" on my search store? I have been looking for a method to apply to the return this.searchStore.results;

You can do it like this (copied from the real Results component)

import { Component } from "vue-instantsearch"; 

export default {
  components: { "v-image": VImage },
  mixins: [Component],
  props: {
    stack: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    results() {
      if (this.stack === false) {
        return this.searchStore.results;
      }
      if (typeof this.stackedResults === 'undefined') {
        this.stackedResults = [];
      }
      if (this.searchStore.page === 1) {
        this.stackedResults = [];
      }
      if (
        this.stackedResults.length === 0 ||
        this.searchStore.results.length === 0
      ) {
        this.stackedResults.push(...this.searchStore.results);
      } else {
        const lastStacked = this.stackedResults[this.stackedResults.length - 1];
        const lastResult = this.searchStore.results[
          this.searchStore.results.length - 1
        ];
        if (lastStacked.objectID !== lastResult.objectID) {
          this.stackedResults.push(...this.searchStore.results);
        }
      }
      return this.stackedResults;
    },
    rows() {
      var arr = this.results;
      var len = 3;
      var chunks = [],
        i = 0,
        n = arr.length;
      while (i < n) {
        chunks.push(arr.slice(i, (i += len)));
      }
      return chunks;
    }
  }
};
1 Like