Vue Custom Component not synchronising with the search


I’m working on a project using: Laravel, Vue InstantSearch and axios.

In my search I’ve made a custom Vue component that allows users to “Shortlist” aka favourite results in the search.

This conditionally displays a heart symbol on each result for the user. The hearts background is filled when a result is shortlisted by the user and non filled when the result is not.

This component uses axios to trigger a function in Laravel for each result to check if it is shortlisted or not. Same for when a user clicks on the heart symbol to favourite or un-favourite a result.

This is working fine except when a search is made or the results are filtered, then all results are loaded as shortlisted.

What I’d like to know is there a way to force custom Vue components to Mount every time a search / filtering is done ?

When my custom component is mounted I have been console logging this and it appears that when a search / filtering is done, mounting of the component does not occur.

I’d just like better synchronisation of my custom component with the search.

Thanks in advance.

You should be able to give the ais-index component a key and change that whenever it needs to be rerendered. Otherwise I think I’ll need to see some more code to advice anything else. Note that searchStore also has a refresh function you can call.

For more info it would be best if you could give code I can play around with, and find the best solution


Thanks for the reply, I’ve done some more digging online and this post on github Event: "ready" or "loading" · Issue #317 · algolia/vue-instantsearch · GitHub contained the code I needed to synch my component with the search.

watch: {
    'searchStore._results'(val) {
        // Emit event

I’ve added this to my Vue component and then added my axios method into this. My shortlisting component seams to be updating properly now when a search is made or when filtering occurs.

1 Like