Vue-InstantSearch with Algolia & Laravel: Hide result on empty query

Question

I'd like to figure out how to hide the index/result on an empty search query.

In my blade I have the code (slightly modified from the official documentation):

<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>

    <ais-state-results>
      <template slot-scope="{ state: { query } }">
        <ais-hits v-if="query.length > 0">
    
            <div slot="item" slot-scope="{ item }">
                <h2>@{{ item.Title}}</h2>
                <p>@{{ item.Text}}</p>
            </div>
                                
        </ais-hits>
      </template>
    </ais-state-results> 
</ais-instant-search>

If I enter a search query this works fine, but on empty query this displays the following unwanted notification on my page (instead of the before unwanted index):

Use this component to have a different layout based on a certain state. 
Fill in the slot, and get access to the following things on the slot-scope:
    
    results: [
      "_rawResults",
      "hits",
      "nbHits",
[..]

How can I hide this notification?

Answer 1

Ah, I just found a solution I think. This notification text is displayed if there's no DOM element inside <ais-hits>. And in case of no query there isn't, since "v-if" removes that. So If instead of "v-if" I use "v-show" it works as I need it, since the DOM element still exists, but isn't displayed (display:hidden).

<ais-instant-search index-name="myIndex" :search-client="searchClient">
<ais-search-box placeholder="Search here"></ais-search-box>

    <ais-state-results>
      <template slot-scope="{ state: { query } }">
        <ais-hits v-show="query.length > 0">
    
            <div slot="item" slot-scope="{ item }">
                <h2>@{{ item.Title}}</h2>
                <p>@{{ item.Text}}</p>
            </div>
                                
        </ais-hits>
      </template>
    </ais-state-results>