Algolia Instantsearch (Vuejs) - Поместить окно поиска снаружи (в другой компонент)

Я создаю одностраничное приложение, используя Vue, Vue-router и Vuex. Я пытался внедрить Algolia Instantsearch vuejs, но у меня возникли некоторые проблемы. Так как мое приложение использует много вложенных компонентов, мне трудно понять, как его структурировать.

Это базовая структура: - приложение - верхний колонтитул (это место, где размещается входная информация для поиска) - контент - поиск (именно здесь отображаются уточнения и результаты) - нижний колонтитул

Я прочитал документацию, но я мог что-то пропустить. Допустим, пользователь находится на домашней странице, когда начинает вводить данные для поиска в компоненте Header. Затем я использую vue-router для перехода к / search, но это не похоже на работу?

Я не знаю, как это сделать? Из того, что я могу понять, документация показывает только, как синхронизировать с vue-router и теперь, как обрабатывать мой сценарий.

Я полагаю, что это довольно распространенный вариант использования InstantSearch, но я не смог найти ничего, что можно найти через Google. Может быть потому, что я не знаю, как описать проблему.

Я надеюсь, что вы можете помочь.

Спасибо!

Источник

0 ответов

Если вы используете последнюю версию vue-instantsearch, вы можете использовать ais-configureкак описано в https://www.algolia.com/doc/api-reference/widgets/configure/vue/.

<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>
Источник
Другие вопросы по тегам