Style RefinementList component in Vue-Instantsearch 2.0 beta

[nragusa]

Hi everyone,
I’m trying to style the RefinementList component using Vue Instantsearch 2.0 beta. Here is my template:

<ais-refinement-list attribute="level">
    <template slot="default" slot-scope="{ items }">
        <form>
            <div class="form-group">
            <div
                class="form-check"
                v-for="item in items"
                :key="item.value"
            >
                <input
                class="form-check-input"
                type="checkbox"
                :value="item.value"
                />
                {{ item.value }}
                <span class="text-muted">{{ item.count }}</span>
            </div>
            </div>
        </form>
    </template>
</ais-refinement-list>

It styles everything properly, however, when clicking the checkboxes, the results do not get updated. Everything works properly when I don’t try to add my own template, so I’m not sure what else to try. One thing I did notice is that when I provide my own template, there is no longer an change action on the checkbox when compared to using the stock template provided by the component.

Any help would be greatly appreciated!

[nragusa]

I think I just got it working, but wouldn’t mind someone sanity checking that this is the right thing to do.

I added @change="refine(item.value)" to my template and included it in the slot-scope. So now my template looks like:

<ais-refinement-list attribute="level">
    <template slot="default" slot-scope="{ items, refine }">
    <form>
        <div class="form-group">
            <div
                class="form-check"
                v-for="item in items"
                :key="item.value"
            >
                <input
                class="form-check-input"
                type="checkbox"
                :value="item.value"
                @change="refine(item.value)"
                />
                {{ item.value }}
                <span class="text-muted">{{ item.count }}</span>
            </div>
        </div>
    </form>
    </template
</ais-refinement-list>

Any thoughts or feedback are still appreciated!

[haroen]

That’s indeed the correct solution, change detection should be done with the refine function given to the item slot