Question

嘿，我在我的新Laravel项目中使用了Algolia，但我深入研究了这个问题 Algolia显示我拥有的所有数据＆＃34;标题 - 描述＆＃34;。

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

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

如果查询为空白，如何设置Algolia不返回任何结果Laravel＆amp; Vue即时搜索

1 个答案: