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.