<template v-slot:item="{ item }"> + unrecognized slot name in VueInstantSearch 4

Open Q&A
#1 
      <ais-hits>
            <template v-slot:item="{ item }">
                <div class="ais-title">
                    <a :href="'/jobs/' + item.slug " class="ais-title">
                        <ais-highlight :hit="item"
                                       attribute="jobtitle"
                                       class="ais-title">

                        </ais-highlight>
                    </a>
                </div>
                <div class="bb-content-row">
                    <div class="ais-img">
                        <img :src="item.thumbUrl" width=200 height=140 />
                    </div>
                    <p>
                        <ais-highlight :hit="item"
                                       class="ais-description"
                                       attribute="description"
                                       :attributesToSnippet="['description:10']"/>
                    </p>
                </div>
....
import {
    AisClearRefinements,
    AisConfigure,
    AisHighlight,
    AisHits,
    AisInstantSearch,
    AisPagination,
    AisPanel,
    AisRefinementList,
    AisSearchBox,
    // ClearRefinements,
    // NoResults,
    // VueSlider
} from 'vue-instantsearch/vue3/es';

export default {
    name: "JobsSearchBox.vue",
    components: {
        AisClearRefinements,
        AisConfigure,
        AisHighlight,
        AisHits,
        AisInstantSearch,
        AisPagination,
        AisPanel,
        AisRefinementList,
        AisSearchBox,
        Countdown,
        // ClearRefinements,
        // NoResults,
        // VueSlider
    },
...

Hello,

I’m upgrading from v3 to v4. For some reason the slot cannot locate the item objects.

However, if I change item to name <template v-slot:name="{ item }"> the objects populate but they do little more than list the field, such as objectID: 19, index: 1

Thank you,
Trevor

#3

Why would you change it from item to name? there’s no slot with the name name :slight_smile:

#4

omg.

I tried that so many times but it did not populate the item. Phpstorm says unrecognized slot name .
This was the old syntax <template slot="item" slot-scope="{ item }"> but later I found v-slot, but must not have tried item with that new syntax.

Anyhow, I did what you said and this time it populated everything! thank you much @haroen

In the future, where would I look to know that the slot name was item? It’s confusing when phpstorm says it’s an unrecognized slot.

#5

The slot format is mentioned in the docs, ais-hits | Vue InstantSearch | Algolia Does that help? Maybe the error message you got in phpstorm was a little confusing because of the “name” name?

1 Like