laravel - 如果查询为空白，如何将 Algolia 设置为不返回任何结果 Laravel & Vue Instant Search

Question

嘿，我在我的新 Laravel 项目中使用了 Algolia，但我了解到 Algolia 会显示我拥有的所有数据“Titel - description”。

我想要的只是在搜索框中输入内容时显示结果。

我的 HTML 代码

<div id="app">
    <!-- Components will go here -->
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ env('ALGOLIA_SEARCH') }}"
               index-name="posts">

        <ais-search-box placeholder="Find products..."></ais-search-box>


        <ais-results>
            <template slot-scope="{ result }">
                <div>

                    <h4>@{{ result.progName }}</h4>
                    <ul>
                        <li>@{{ result.description }}</li>
                    </ul>
                </div>
            </template>
        </ais-results>

    </ais-index>
</div>

后模型

  <?php

  namespace App;

  use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;

  class Post extends Model
     {
        //
         use Searchable;

     }

Answer 1

您应该替换ais-results为根据查询隐藏它的组件。该组件看起来像这样：

<!-- MyResults.vue -->
<template>
  <div v-if="query.length > 0">
    <slot name="header"></slot>
    <slot name="default" v-for="(result, index) in results" :result="result" :index="index">
      {{index}}. Result 'objectID': {{ result.objectID }}
    </slot>
    <slot name="footer"></slot>
  </div>
</template>

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

export default {
  mixins: [Component],
  computed: {
    query() {
      return this.searchStore.query;
    },
    results() {
      return this.searchStore.results;
    },
  },
};
</script>

ais-results然后用您自己的my-results组件替换您的用法：

<div id="app">
    <!-- Components will go here -->
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ env('ALGOLIA_SEARCH') }}"
               index-name="posts">

        <ais-search-box placeholder="Find products..."></ais-search-box>


        <my-results>
            <template slot-scope="{ result }">
                <div>

                    <h4>@{{ result.progName }}</h4>
                    <ul>
                        <li>@{{ result.description }}</li>
                    </ul>
                </div>
            </template>
        </my-results>

    </ais-index>
</div>