Vue instantsearch - event when hits loaded?

Is there any way with vue-instantsearch to execute some custom code when search results have finished loading? I was expecting the ais-hits widget to raise an event I could hook into, but it doesn’t look like the vue widgets raise any events according to the documentation. Any suggestions?

Hi there
Thanks for reaching out to us.

I think the way depends on what you want to do after loading.
Off the top of my head, you can create a custom component with connectHits:

What kind of custom code would you like to run?

Thanks for your reply.

What I’m trying to do is set the scroll position on the search results screen after returning from the “item details” screen (I’m using the regular vue-router).

At the moment as proof of concept I have code like this…

mounted: function() {

    window.setTimeout(() => { 

      document.documentElement.scrollTop = this.scrollPos;

    }, 2000)    
  },

The timeout is there to allow time for results to be displayed. Without that the scrollTop is set before the content is in the DOM and therefore the element has no height and therefore can’t be scrolled to. I don’t really want the timeout there though, so putting this code in the (non-existent) “results added to DOM” event would be ideal.

Hi,

There is currently no event for this but you can use https://github.com/Akryum/vue-observe-visibility to check for the visibility of the results and restore the scroll position.

You can find an example of implementation with the InfiniteHits component in our documentation: https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/infinite-scroll/vue/#track-the-scroll-position