Setting the initial values of a refinement list using vue-instantsearch

Been pulling my hair out on this one. How do you set an initial value for a refinement list?

Eg. If you have a list of categories, and you want a specific category pre-selected.

I tried using the helper and was able to set a category and the results reflected that. What wasn’t reflected though was a tick in the checkbox in that refinement list.

So I went with plan B. I set a timeout of a second, then use this.$refs.category.refine() to ‘click’ the correct category. That works - yay.

But that’s relying on the data being ready in 1 second.

I feel like this is really obvious and I cannot work it out.

I guess I’ll need to create a codepen to show this issue?

Hi @rob.cooper, I think this documentation may help you set the default for the refinement.

1 Like

Hey Cindy - I can’t get this to work. What’s the best way of me sharing the issue? Can you link me to the codepen so I can recreate the issue?

Hi rob,

You can try to create a codesandbox with your issue and share it here.
You can use this template to bootstrap your demo: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch

But to clarify the idea behind the link shared by Cindy. The main trick is to pass a ais-configure component in which you define:

 :disjunctive-facets-refinements.camel={"my-refinement-attribute-name": ["my", "initial", "values"]} 

I hope this helps a bit.
Best,