Vue InstantSearch: Multiple Instances in Parent Component

Hello

I have a Search component that inits the SearchStore via createFromAlgoliaCredentials and then accepts the index name as a prop. A bit like this:

<SearchSelect :index-name="indexName1"/>

I’m required to have multiple instances of this component on one page, but when I do this in a parent component (passing in different indexes for each instance)…

<SearchSelect :index-name="indexName1"/>
<SearchSelect :index-name="indexName2"/>
<SearchSelect :index-name="indexName3"/>

… they all return results from indexName3, not their correct corresponding indexes.

I’m pretty sure this is because the SearchStore is only initialised once within the SearchSelect component.

What’s the best practice in this situation? I’m trying to avoid having multiple components that provide the exact same functionality.

Thanks

Hi @rossdis,

Yes you might be right, you are maybe creating a singleton in your SearchSelect component.
Can I see the code of this component? This would help for debugging.

Cheers,

Hey, @iam4x, thanks

Here’s the relevant code from that component:

<template>
  <div>

    <TextInput v-model="query"/>

    <ais-index
      :search-store="searchStore"
      :index-name="indexName"
      :query="query"
    >
        <ul>
          <li v-for="(result, index) in results" :key="index">
            {{ result.name }}
          </li>
        </ul>
    </ais-index>

  </div>
</template>

<script>
const searchStore = createFromAlgoliaCredentials(
  algoliaAPIID,
  algoliaAPIkey
)

export default {
  props: {
    indexName: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      query: null,
      searchStore
    }
  },

  computed: {
    results(searchStore) {
      return this.searchStore.results
    }
  }
}
</script>