vuejs2 - Algolia Instantsearch (Vuejs) - Place searchbox outside (in a different component)

Question

I'm building a Single Page Application using, Vue, Vue-router and Vuex. I've tried to implement Algolia Instantsearch vuejs, but I'm having some issues. Since my app is using a lot of nested components, I'm having a hard time figuring out how to structure this one.

This is the basic structure: - App - Header (this is where the search input is placed) - Content - Search (this is where the refinements and results are shown) - Footer

I've read the documentation, but I might have missed something. Let's say the user is on the homepage, when starting typing into the searchinput in the Header component. I then use vue-router to go to /search, but this doesn't seem to work?

I don't know how to do this? As from what I can understand, the documentation only show you how to sync with vue-router and now how to handle my scenario.

I believe this is a fairly common use case for instantsearch, but I couldn't find anything searching through Google. Maybe because, I don't know how to describe the issue.

I hope you can help.

Thanks!

标签： vuejs2vue-routeralgoliainstantsearchvue-instant-search

Answer 1

如果您使用最新版本的 vue-instantsearch，您可以按照https://www.algolia.com/doc/api-reference/widgets/configure/vue/ais-configure的描述使用。

<ais-instant-search :index-name="indexName" :search-client="searchClient">
  <ais-configure :query="query" />
  <ais-hits>
    <div slot="item" slot-scope="{ item }">
      <h2>{{ item }}</h2>
    </div>
  </ais-hits>
</ais-instant-search>