Tried to highlight results in v-for but it does not work

I am trying to highlight some results in my template but it does not work. Maybe someone can help me out.

 
  <a v-for="subtopic in item.subtopics" class="col-md-6 mb-4 p-0 text-decoration-none" :href="'/subtopic/'+ subtopic.slug">
    <div class="pr-3">
        // This does not work 
       <h3 class="h6 mb-1 blue"><strong><ais-highlight attribute="title" :hit="subtopic"/></strong></h3>
       <p class="text-muted text-height-125">{{ subtopic.markdown }}</p>
    </div>
 </a>

Best

Hi @NastyPasty, from what’ve you shared I don’t see an issue. It’s similar to how we recommend using the ais-highlight component, for example on line 32 of App.vue in this codesandbox: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch?file=/src/App.vue:907-912.

Is “title” declared as in attributesToHighlight? You can access this in the Dashboard under Indices >> index in question >> Pagination and Display >> Highlighting.

If it already is and this still isn’t working, could you post a live reproduction (possibly forked off the Codesandbox linked above) so we can check out exactly what’s happening?

1 Like

Thanks for your answer @maria.schreiber! Yes the title is declared in the attributesToHighlight section, but it still does not work. I made a codesandbox sample

Hope that helps

Hi @NastyPasty,

The <ais-highlight /> component accepts an attribute and a hit. The attribute is actually a path to the highlighted object. Here title stops at the top level but what we really want is the title of each subtopic. The path for this attribute is subtopics[0].title, subtopics[1].title, … We can use the index provided by v-for to build the path on the fly:

<a v-for="(subtopic, index) in item.subtopics">
  <ais-highlight :attribute="`subtopics.${index}.title`" :hit="item" /> 
  <p>{{ subtopic.markdown }}</p>
</a>

Hope that helps!

1 Like

Thank you so much! It works perfectly!! :grinning: