Using a component inside vue ais-hits

Question

I'm working on an Algolia search page which is working fine with this:

<ais-hits>
    <template #default="{ items }">
        …
    </template>
</ais-hits>

but now I want to extract the contents of the template into a separate component so it can be used in different search pages.

So I've changed it to

<ais-hits>
    <template v-for="item in items" :key="item.objectID">
        <SearchCard :item="item" />
    </template>
</ais-hits>

and in SearchCard.vue I have

<template>
  <div>test</div>
</template>

but on the front end, I'm getting output like this:

objectID: 32941, index: 0
objectID: 32980, index: 1
objectID: 32996, index: 2

What should it be instead?

Answer 1

Here are some storybook live examples and here is the code for them

The objectID, index view is rendered when you just have <ais-hits></ais-hits> as seen in the storybook simple usage example

Not a vue expert myself, but anyway you can do something like

<ais-hits>
  <template #item="{ item }">
    <SearchCard :item="item" />
  </template>
</ais-hits>

and do whatever you want in your component

<template>
  <div>
    <h3>
      {{item.name}}
    </h3>
    <p>{{item.description}}</p>
  </div>
</template>