vue-Instantsearch events; call a custom method if no results

Hi! Just trying this out and I’d like to call a custom method when no results are found and the no-results slot is loaded.

Is there a property I can watch maybe? I don’t see any public events in the docs at all. Thanks!

Hi @felix,

Which version of Vue InstantSearch are you using?

Thanks!

Hi Samuel! "vue-instantsearch": "^1.7.0"

Hi @felix,

You are right, no events are triggered but you can use the searchStore and watch the results attribute. You’ll be able to detect empty results and trigger your custom function. Note that we released the version 2 of Vue InstantSearch, check out the migration guide!

Oh cool I’ll look into the searchStore

Looks like the npm version is still at 1.7, where can I get the beta? I assume it will just work with Nuxt? Thanks again!

You can install it with:

npm install vue-instantsearch@beta

Yes it should just work with Nuxt (expect the SSR that we do not released yet).

Cheers!

I’ve got it working with the beta, much nicer!

Still struggling to trigger events though, ideally I’d like to be able to

  1. call a custom method when no results are returned
  2. call clear/reset query externally (I’d like to clear the search when I click outside the component)
  3. Also an event when the query changes would be awesome

Are these available at all in the beta? Thanks again!

Hi @felix,

  1. Call a custom method when no results are returned
  2. Also an event when the query changes would be awesome

We are pretty bad with events right now but it’s something we want to fix. Right now you can either use the scoped slots with the combination of watch to detect a change. Or even the mixin with the combination of watch.

  1. Call clear/reset query externally (I’d like to clear the search when I click outside the component)

You can use the ais-clear-refinements to build this. You can either use the scoped slots or the mixin.

Hope that helps!

Yes events triggering side effects would be perfect, I’ll keep an eye on the releases!

Regarding the watching, can I watch for changes/properties on the ais-instant-search currently?

I’m not sure to fully understand what you want to do. What is your use case for this?

You can provide props to the ais-instant-search component. You can change those props and they are watched by the component to trigger the correct action (e.g. update the searchClient or the indexName).

OK I’m having to build my own autocomplete component as the vue-autosuggest won’t cover my needs.

So like all autosuggest drop downs, I need to clear the search (hide the dropdown) when either a result is clicked or when a user clicks outside the component.

I’ve updated my codesandbox with a demo component, does this make sense? Thanks again for your advice & help, really is appreciated!!