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

易卜拉欣·哈杰（Ibrahim Hajjaj）|

嘿，我在新的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;

     }

哈罗恩·维亚内（Haroen Viaene）

您应该替换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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。