Algolia & Vue InstantSearch: настройка виджетов с помощью слота
Я пытаюсь изменить вывод виджета InstantSearch для Vue .
В документации ( https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui ) он говорит, что с помощью scope-slot он переопределит полный вывод DOM виджета:
Но здесь, похоже, дело обстоит иначе. Это мой код ниже, используя слот с простыми <tr>
и <td>
:
Вместо рендеринга <tr>
с <td>
внутри него, я вижу здесь:
- Div с классом ais-хитов
- Вложенный ol с классом ais-Hits-list
- Вложенный li с классом ais-Hits-item
Выход такой:
Если я перейду к элементу inspect и удалю элементы, упомянутые выше (см. Как удаляются div, ol и li):
Тогда результат будет правильным:
Я делаю что-то не так? Разве слот не должен переопределять вывод DOM и оставлять остальное разработчику для стиля?
Любая помощь будет очень признательна!
Ответы - Algolia & Vue InstantSearch: настройка виджетов с помощью слота / Algolia & Vue InstantSearch: Customising widgets with slot

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.


div
. Это ограничение Vue, корневой элемент не может быть слотом или шаблоном. Единственная альтернатива-создать пользовательский виджет с помощью mixin. Я обновил ответ.

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>