0

我是 Algolia 即时搜索和其他组件的新手。我为 Algolia 创建了一个单独的组件。

我已经运行 npm 命令来安装依赖项

npm install vue-instantsearch algoliasearch instantsearch.css

下面是组件 SearchBox 中的模板代码。

<template>
    <ais-instant-search
        id="my-search-box"
        :search-client="searchClient"
        index-name="index-name"
    >
        <!-- Other search components go here -->
        <ais-search-box placeholder="string" submit-title="string" />
    </ais-instant-search>
</template>

<script>
import algoliasearch from "algoliasearch/lite";

export default {
    name: "my-component",
    data() {
        return {
            searchClient: algoliasearch(
                "key",
                "id"
            )
        };
    }
};
</script>

app.js 看起来像这样

import VueInstantSearch from 'vue-instantsearch';

Vue.use(VueInstantSearch);

我按照提供的文档仍然无法显示搜索框。谁能帮我知道这里的问题。

仅供参考：我正在将此组件导出到另一个父组件中。

4

2 回答 2

0

这听起来不太有帮助，但我在使用 Nuxt.js 实现 Algolia 时遇到了同样的问题。我也一直在关注文档，但它根本没有帮助。谷歌也没有提供太多帮助。

我试图放弃 Nuxt.js 并尝试在 Vue 中实现，但 Vue 文档更糟糕！：/

一整天后，我终于让它与 Nuxt.js 一起工作。我认为代码中的某个地方可能存在错误，或者与所有更新的代码和插件相比，文档非常旧。

如果您正在考虑使用 Nuxt.js，我很高兴为您提供帮助。

于 2020-12-09T16:56:58.670 回答
0

我注意到一件事你放错了价值id和key.

做这个：

import algoliasearch from "algoliasearch/lite";
data() {
  return {
    searchClient: algoliasearch("id","key")
  };
}

代替：

import algoliasearch from "algoliasearch/lite";
data() {
  return {
    searchClient: algoliasearch("key","id")
  };
}

这应该适用于 Vue cli for vue-instantsearch@^3.0.0. 至于Nuxtjs这种方式行不通。我发现官方文档对我有用。

于 2021-02-09T02:07:01.670 回答