algolia - 隐藏 ais-state-results 小部件的默认消息
问题描述
我正在使用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>
解决方案
该小部件<ais-state-results>
包含一个后备内容,该内容在默认插槽为空时呈现(这是您提供的屏幕截图)。一旦应用程序启动,您在示例中编写的两个条件都是错误的。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上找到一个活生生的例子。
推荐阅读
- docker - 是否可以将本地测试 docker-airflow 环境链接到 GCP 上的现有 Airflow?
- python - 无法让最后几个国家在 pygal 世界地图上显示其人口
- php - 如何在不受内存限制的情况下在php中读取大文件
- python - 如何使用 pandas hist 注释三峰直方图?
- notifications - Android Ble 延迟通知
- python - 在新闻列表中显示文章快照
- android - 仅在选择器android中将高度设置为自定义复选框按钮
- javascript - 结果过滤不匹配元素的数组
- sql-server - 带有 Derby JDBC 的 SQL Server Express
- pandas - 遍历字典并应用数据框转换