Vue Instantsearch, Multiple Index, Hide Empty Results

I have this which works great:

<template>
    <ais-index :search-store="searchStore" index-name="books">
        <ais-search-box placeholder="Search..."></ais-search-box>
        <ais-results v-show="searchStore.query.length > 0">
            <template slot-scope="{ result }">
                <p>{{ result.title }}</p>
            </template>
        </ais-results>
    </ais-index>
</template>

<script>
    import { createFromAlgoliaCredentials } from 'vue-instantsearch';

    const searchStore = createFromAlgoliaCredentials(window.algolia.app_id, window.algolia.search_key);

    export default {
        data() {
            return { searchStore };
        }
    }
</script>

But now I want to search multiple indicies at the same time…I tried following the instructions here, but can’t seem to find the right combo to make it all work out.

Any ideas?

Hi,

Have you been able to extract the query outside the <ais-index> element?

It should be something like

<template>

    <input v-model="query">

    <ais-index :search-store="searchStore" index-name="books">
        <ais-search-box placeholder="Search..."></ais-search-box>
        <ais-results v-show="searchStore.query.length > 0">
            <template slot-scope="{ result }">
                <p>{{ result.title }}</p>
            </template>
        </ais-results>
    </ais-index>
</template>

<script>
    import { createFromAlgoliaCredentials } from 'vue-instantsearch';

    const searchStore = createFromAlgoliaCredentials(window.algolia.app_id, window.algolia.search_key);

    export default {
        data() {
            return { 
                searchStore: searchStore,
                query: ''
            };
        }
    }
</script>

Can you also post any error you get in the console?

Getting closer…

<template>
    <div>
    <input v-model="query">
    <div class="search-everything">
    <ais-index :search-store="searchStore" index-name="books" :query="query">
        <ais-results v-show="searchStore.query.length > 0">
            <template slot-scope="{ result }">
                <a :href="'/books/'+result.slug" class="hover:no-underline text-black">
                            <p>{{ result.title }}</p>
                </a>
            </template>
        </ais-results>
    </ais-index>
    <ais-index :search-store="searchStore" index-name="magazines" :query="query">
        <ais-results v-show="searchStore.query.length > 0">
             <template slot-scope="{ result }">
                <a :href="'/magazines/'+result.slug" class="hover:no-underline text-black">
                            <p>{{ result.publication }}</p>
                </a>
            </template>
        </ais-results>
    </ais-index>
    </div>
    </div>
</template>

<script>
    import { createFromAlgoliaCredentials } from 'vue-instantsearch';

    const searchStore = createFromAlgoliaCredentials(window.algolia.app_id, window.algolia.search_key);

    export default {
        data() {
            return {
                searchStore: searchStore,
                query: ''
            };
        }
    }
</script>

No errors with this - but the results - the first index is showing results from the second search index…but with the /books URL attached to it…it’s like its just grabbing info from the second index.

I got it to work by duplicating the searchStore like this:

<script>
    import { createFromAlgoliaCredentials } from 'vue-instantsearch';

    const searchStore = createFromAlgoliaCredentials(window.algolia.app_id, window.algolia.search_key);
    const searchStore2 = createFromAlgoliaCredentials(window.algolia.app_id, window.algolia.search_key);


    export default {
        data() {
            return {
                searchStore: searchStore,
                searchStore2: searchStore2,
                query: ''
            };
        }
    }
</script>

Is this recommended?