0

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

在我的刀片中,我有代码(从官方文档略有修改):

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

如何隐藏此通知?

4

1 回答 1

3

啊,我刚刚找到了我认为的解决方案。如果内部没有 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> 
于 2020-07-26T14:49:21.987 回答