How to bind vue data to refinementList checkboxes

I’m currently using vue-instantsearch on my project and I want to bind data from a “categories” RefinementList with Vue so that I can display “tags” of checked categories in another div of the page. Those tags can be closed and I want the checkbox to be unchecked consequently in the refinementList.

There is a good example in vue.js documentation of the binding between checkboxes and data with “v-model” (example for multiple checkboxes).

In order to have the v-model on the checkboxes I modified the template for refinementList like this :


However, this does not seem to work as when I check / uncheck the checkboxes my vue data does not change.

Any idea on how to do this with Vue / RefinementList?

Are you using Vue InstantSearch, or InstantSearch.js inside Vue?

Hi, I’m using InstantSearch.js inside Vue

Hi @arnaud.tiret.
I don’t think what you’re trying to accomplish is possible with the widget.
You can maybe leverage the related connector.

Since you’re using vue, you’re better off using vue-instantsearch instead of instantsearch.js.