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?
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>