隐藏 ais-state-results 小部件的默认消息

Question

我正在使用 ais-instant-search 和 ais-state-results 来显示我的数据。我将结果隐藏到 query.length > 0。它有效，但如果我不输入任何搜索字符串，它总是会显示一条消息。下面是我的代码和截图：

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

Answer 1

当默认插槽为空时呈现的小部件 <ais-state-results> contains a fallback content（这是您提供的屏幕截图）。一旦应用程序启动，您在示例中编写的两个条件都是错误的。由于插槽内没有渲染任何内容，默认的会启动。您可以在满足 none 条件时使用空 div 来解决此问题。这是一个例子：

<ais-state-results>
  <template slot-scope="{ query, hits }">
    <!-- First condition -->
    <p v-if="!hits.length">Not found for: <q>{{ query }}</q></p>
    <!-- Second condition -->
    <ais-hits v-else-if="query" />
    <!-- Fallback condition -->
    <div v-else />
  </template>
</ais-state-results>

您可以在 CodeSandbox 上找到一个实例。

隐藏 ais-state-results 小部件的默认消息

Hide default message of ais-state-results widget

algolia

instantsearch.js

vue-instant-search