Refinementlist labels

Hey everyone. New to vue instantsearch v2, and trying to figure out how I can display a boolean differently in the refinement list. Currently it has true and false and would rather give it other strings to display.

How do I do this?

Hi @trent.c.harrison,

I believe this documentation about customizing the UI of the refinement list may be helpful to intercept and change the values.

I’ll try and figure it out more, but was having a tough time processing that and keeping the same design.

Hi @trent.c.harrison, would it be possible to put your code in a codesandbox to demonstrate the issues you are having? We have a starter template for Vue here.

Thank you, that was very helpful @cindy.cullen . I am currently working through the problem, but I have a specific issue now.

<input type=“checkbox” class=“ais-RefinementList-checkbox” @change=“refine(item.value)”>

This code seems to work, however the checkbox does not persist. Meaning that with the @ change or @ change.prevent from the docs, you lose the checkbox=“true” functionality. Any ideas for how to fix this?

Hi @trent.c.harrison. Do you have a link to your codesandbox you can share?

Sorry @cindy.cullen, I currently dont have a codesandbox setup for this. This is being done just on my home computer and I haven’t had a chance.

For some issue the checkbox input loses its ability to be “checked” when you add the @ change.prevent=“refine(item.value)” which is necessary for the refinement to occur.

Ive gone online some to see, and others have discussed similar issues, but i have been unable to resolve the problem on my own.

@cindy.cullen,

Here is more clarification. If I utilize the as normal, this all works out nicely.

However, when I used and use the example in the docs as a template, it seems to break on the checkbox. Everything else is working well.

I am not sure how to set this up in codesandbox, but here is the portion that seems to not be working, specifically the

      <ais-menu attribute="fellow">
          <ul class="ais-RefinementList-list" slot-scope="{ items, createURL, refine }">
              <li class="ais-RefinementList-item" 
                v-for="item in items"
                :key="item.value">
                <component :is="item.isRefined ? 'strong' : 'span'">
                  <label class="ais-RefinementList-label">
                      <input type="checkbox" class="ais-RefinementList-checkbox"
                             @change="refine(item.value)">
                      <span class="ais-RefinementList-labelText" v-text="item.value == 'true' ? 'AAOMPT Fellow' : 'Non-Fellow'" ></span>
                      
                      <span class="ais-RefinementList-count">
                        {{item.count}}</span>
                  </label>
                </component>
              </li>
          </ul>
        </ais-menu>

Hi @trent.c.harrison, some of your message did not come through. Can you fill in the parts that were left out?

@cindy.cullen,
I’m not sure what part did not come through.
below is my code. i am trying to customize a Refinement, so I used the .

However, when I do this, then input no longer recognizes getting checked. After some research it seems to be how I am setting up and using the @change=“refine(item.value)”. But i’m not sure how to adjust it.

<ais-menu attribute="fellow">
      <ul class="ais-RefinementList-list" slot-scope="{ items, createURL, refine }">
          <li class="ais-RefinementList-item" 
            v-for="item in items"
            :key="item.value">
            <component :is="item.isRefined ? 'strong' : 'span'">
              <label class="ais-RefinementList-label">
                  <input type="checkbox" class="ais-RefinementList-checkbox"
                         @change="refine(item.value)">
                  <span class="ais-RefinementList-labelText" v-text="item.value == 'true' ? 'AAOMPT Fellow' : 'Non-Fellow'" ></span>
                  
                  <span class="ais-RefinementList-count">
                    {{item.count}}</span>
              </label>
            </component>
          </li>
      </ul>
    </ais-menu>

Does it have something to do with the line

<component :is="item.isRefined ? 'strong' : 'span' ">

is this where you would adjust this, but how?

Figured it out. Added the following line inside of the

:checked="item.isRefined == true"

1 Like

Thanks for letting us know @trent.c.harrison! Are there any outstanding questions left on this?