Algolia & Vue InstantSearch: настройка виджетов с помощью слота


Algolia & Vue InstantSearch: настройка виджетов с помощью слота

18.10.2019 01:03:36 Просмотров 118 Источник

Я пытаюсь изменить вывод виджета InstantSearch для Vue .

В документации ( https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui ) он говорит, что с помощью scope-slot он переопределит полный вывод DOM виджета:

enter image description here

Но здесь, похоже, дело обстоит иначе. Это мой код ниже, используя слот с простыми <tr>и <td>:

enter image description here

Вместо рендеринга <tr>с <td>внутри него, я вижу здесь:

  • Div с классом ais-хитов
  • Вложенный ol с классом ais-Hits-list
  • Вложенный li с классом ais-Hits-item

enter image description here

Выход такой:

enter image description here

Если я перейду к элементу inspect и удалю элементы, упомянутые выше (см. Как удаляются div, ol и li):

enter image description here

Тогда результат будет правильным:

enter image description here

Я делаю что-то не так? Разве слот не должен переопределять вывод DOM и оставлять остальное разработчику для стиля?

Любая помощь будет очень признательна!

vue.js algolia vue-instant-search
У вопроса есть решение - Посмотреть?

Ответы - Algolia &amp; Vue InstantSearch: настройка виджетов с помощью слота / Algolia & Vue InstantSearch: Customising widgets with slot

Является ответом!
Samuel Vaillant

18.10.2019 01:54:15

Вы должны использовать default. Вы будете иметь полный контроль над рендером.

item

Вот пример на CodeSandbox.

<ais-hits> <ol slot-scope="{ items }"> <li v-for="item in items" :key="item.objectID"> <ais-highlight :hit="item" attribute="name" /> <p> <ais-highlight :hit="item" attribute="description" /> </p> </li> </ol> </ais-hits> всегда будут обертывать слот по умолчанию с ais-Hits(см. GitHub для объяснения). Единственная альтернатива, чтобы избежать этой проблемы, чтобы создать свой собственный виджет с помощью mixin div:

createWidgetMixin

Вот пример на CodeSandbox.

Источник
https://stackoverflow.com/questions/58448537/algolia-vue-instantsearch-customising-widgets-with-slot/58449390#comment103238809_58449390
Спасибо за ответ! Мне удалось удалить ol и li, но <ais-hits> создать div с class= "ais-Hits", который разбивает таблицу. Есть ли способ избежать этого div?
https://stackoverflow.com/questions/58448537/algolia-vue-instantsearch-customising-widgets-with-slot/58449390#comment103240341_58449390
С помощью слотов вы не можете избавиться от div. Это ограничение Vue, корневой элемент не может быть слотом или шаблоном. Единственная альтернатива-создать пользовательский виджет с помощью mixin. Я обновил ответ.
christostsang

19.10.2019 11:25:34

Хотя @Samuel Vaillant указал мне правильный путь, я считаю, что приведенный ниже код может помочь другим с той же проблемой, что и я (заполнение таблиц HTML результатами Algolia) без необходимости создавать пользовательские виджеты:

<template>
  <ais-hits>
    <table slot-scope="{ items }">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.objectID">
          <td>
            <ais-highlight :hit="item" attribute="name" />
          </td>
          <td>
            <ais-highlight :hit="item" attribute="description" />
          </td>
        </tr>
      </tbody>
    </table>
  </ais-hits>
</template>
Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X