Hide default message of ais-state-results widget

Question

I am using ais-instant-search and ais-state-results to display my data. I hide the result until query.length > 0. It works but if I don't enter any search string, it always shows a message. Below are my code and screenshot:

<ais-state-results>
            <p slot-scope="{ query, hits }" v-if="!hits.length">
                Not found for: <q>{{ query }}</q>
            </p>
            <template v-else slot-scope="{ query }">
                <ais-hits v-if="query.length > 0">
                    <template slot="item"
                            slot-scope="{ item }"
                    >
                        <h1>
                            <ais-highlight
                                    :hit="item"
                                    attribute="name"
                            />
                        </h1>

                        <ul>
                            <li>{{ item.price }}</li>
                        </ul>

                    </template>
                </ais-hits>
            </template>
        </ais-state-results>

Do you managed to fix your issue? – Samuel Vaillant Jun 04 '19 at 10:58 — Samuel Vaillant, Jun 04 '19 at 10:58
I haven't had the solution for that yet :( – Joshua Hansen Jun 10 '19 at 02:52 — Joshua Hansen, Jun 10 '19 at 02:52

score 2 · Accepted Answer · edited Jul 15 '22 at 21:27

The widget <ais-state-results> contains a fallback content which renders when the default slot is empty (this is the screenshot you gave). Both conditions you've written inside your example are false once the App starts. Since nothing is rendered inside the slot the default one kicks in. You can solve this issue with an empty div when none of the conditions are met. Here is an example:

<ais-state-results>
  <template slot-scope="{ query, hits }">
    <!-- First condition -->
    <p v-if="!hits.length">Not found for: <q>{{ query }}</q></p>
    <!-- Second condition -->
    <ais-hits v-else-if="query" />
    <!-- Fallback condition -->
    <div v-else />
  </template>
</ais-state-results>

You can find a live example on CodeSandbox.

Hide default message of ais-state-results widget

1 Answers1