Hide default message of ais-state-results widget

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:

54%20PM

<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>
1 Like

Hello,

Thanks for contacting us. This seems to be a debug printing issue and not really related to Algolia. We could be able to help you if you send us the whole code sample because we only have the part related to the hits and it’s working properly already.

Thanks

1 Like

Here is my whole code: https://jsfiddle.net/eadxc1v3/1/

I don’t know why I cannot add the code here, so I put it in jsfiddle.

You would need to add the default template to override the default dump of data when there’s no query:

<template
  slot="default"
  v-if="!query"
>
 &nbsp;
</template>

(&nbsp; might be needed to tell the Vue compiler that the template isn’t empty – I’m not too familiar with Vue)

Let me know how it goes!

Thank you for your help, it do hide the dump of data, but when I try to do a search, it won’t show the result also. Here is my code:

<ais-state-results>
            <p slot-scope="{ query, hits }" v-if="!hits.length">
                No product for: <q>{{ query }}</q>
            </p>
            <template slot="default" 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>

Can anyone help me???