带有 Algolia 和 Laravel 的 Vue-InstantSearch：在空查询中隐藏结果答案

【问题标题】：Vue-InstantSearch with Algolia & Laravel: Hide result on empty query带有 Algolia 和 Laravel 的 Vue-InstantSearch：在空查询中隐藏结果
【发布时间】：2020-11-15 22:20:55
【问题描述】：

我想弄清楚如何在空搜索查询中隐藏索引/结果。

在我的刀片中我有代码（从官方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>

如果我输入搜索查询，这可以正常工作，但在空查询时，这会在我的页面上显示以下不需要的通知（而不是之前不需要的索引）：

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",
[..]

如何隐藏此通知？

【问题讨论】：

标签： laravel algolia vue-instant-search

【解决方案1】：

啊，我刚刚找到了我认为的解决方案。如果<ais-hits> 中没有 DOM 元素，则会显示此通知文本。如果没有查询，则没有，因为“v-if”会删除它。因此，如果我使用“v-show”而不是“v-if”，它可以根据需要工作，因为 DOM 元素仍然存在，但不显示（显示：隐藏）。

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

【讨论】：