时间戳

首页 > 解决方案 > 带有 Algolia 和 Laravel 的 Vue-InstantSearch：在空查询中隐藏结果

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

问题描述

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

在我的刀片中，我有代码（从官方文档略有修改）：

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

如何隐藏此通知？

标签： laravelalgoliavue-instant-search

解决方案

啊，我刚刚找到了我认为的解决方案。如果内部没有 DOM 元素，则会显示此通知文本<ais-hits>。如果没有查询，则没有，因为“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>

推荐阅读