Reload listing after updated the row


I am using laravel scout and vue-instantsearch for my application. Right now I am showing data listing using vue-instantsearch. and it’s showing data like the below image.

The issue right now I am facing is when I click on approve/disapprove button in a row it sends an ajax request to the server and update the data but what I want is I want to reload listing after the record is approved/disapproved.

I need help to fix that issue. Suggestions required.


Hi @chiragparekhn,

Typically, you would need to make a state change in your Vue data state to cause a re-render. You can either perform another search operation to get a new list of hits or update the data in your Vue state.

We would need to see your code to help more specifically, so if you could create a codesandbox using our Vue starter template (it can have a dummy ajax call), that will help us troubleshoot further.

Hi @cindy.cullen thanks for getting back to me.

One question is How can I change state in vue component? can you share a reference link?

Hi @chiragparekhn,

I found this article that shows several different ways to force the re-render in Vue, along with the pros and cons. It will depend on your application and how you have it set up as to which method you will want to use.

Ahh no I mean since I am using ais-instant-search I want to update data in that component it self. So is there any way or documentation available to update data in that component?

Hi @chiragparekhn
The way I would solve this is by using the instantSearchInstance.refresh() function.
There is a full example of this function being used to create a “Refresh” button, which you can easily transpose to your case.

I should bring to your attention that’ll you need to guarantee the index is up to date by the time you call refresh.

@Youcef Thanks for your help. I was able to fix the issue with your solution.