How to set only one refinement at a time

Hello. I’m trying to use vue-select (https://vue-select.org/) for my refinement list:

<ais-refinement-list attribute="brand">
    <div slot-scope="{ items, refine }">
        <v-select :options="items" @input="(item) => setSelectedBrand(refine, item)"></v-select>
    </div>
</ais-refinement-list>
methods: {
	setSelectedBrand(refine, item) {
	    refine(item.value);
	},
}

This works, but it seems like by default, the refinement list is keeping track what was previously selected. So if you select something another option from the dropdown, it just appends it to the list. I want to make it so that it only selects one at a time. That way, if you select another one it won’t simply append to it.

Here’s the demo:

If you want to allow a single selection, the way to go is to use ais-menu:

@haroen thanks! but how do I get the currently selected item from the scope. knowing that this widget is meant for single item selection, it should be able to provide the currently selected item from the scope. So I could then set it as the model for vue-select and set a default selected value based on that:

<div class="form-group" slot-scope="{ items, refine, theSelectedItem }">
    <v-select :options="items" v-model="theSelectedItem" @input="(item) => setSelectedBrand(refine, item)">
    </v-select>
</div>

I checked the docs here: https://www.algolia.com/doc/api-reference/widgets/menu/vue/#customize-the-ui
but it seems this isn’t possible.

Hi @ellis,

You can use items.find(item => item.isRefined) to get the currently refined value: https://codesandbox.io/s/heuristic-bassi-soh0k?file=/src/App.vue:648-682