如何在 Laravel + Vue 中隐藏空查询的结果？

Question

使用 Vue 运行 Laravel Scout + Algolia。一切正常，搜索又好又快。但是，我想隐藏空查询的结果，而不是显示整个索引。

Algolia 提供了这个解决方案：

var search = instantsearch({
  [...],
  searchFunction: function(helper) {
    var searchResults = $('.search-results');
    if (helper.state.query === '') {
      searchResults.hide();
      return;
    }
    helper.search();
    searchResults.show();
  }
}

这是我的搜索：

//search.blade.php
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ env('ALGOLIA_SEARCH') }}"
               index-name="dev_users">
        <ais-search-box placeholder="Zoek een gebruiker" :autofocus="true"></ais-search-box>
        <ais-results></ais-results>
<script>
    new Vue({
        el: "#search",
    })
</script>

这是我的 app.js

import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);

我不知道如何实现 Algolia 手册中的代码。你们能指出我正确的方向吗？

提前致谢。

Answer 1

以下是如何根据当前查询使用 Vue InstantSearch 隐藏结果：

<template>
  <ais-index :search-store="searchStore">
    <ais-input></ais-input>
    <results v-show="searchStore.query.length > 0"></results>
  </ais-index>
</template>

<script>
import { createFromAlgoliaCredentials } from 'vue-instantsearch';

const searchStore = createFromAlgoliaCredentials('<appId>', '<apiKey>');

export default {
  data() {
    searchStore
  }
}
</script>