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

Question

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

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

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

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

• A div с классом ais-Hits
• A вложенное ol с классом ais-Hits-list
• Вложенный li с классом ais-Hits-item

Вывод такой:

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

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

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

Любая помощь будет высоко ценится!

Answer 1

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

<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>

Вот пример CodeSandbox .

---

ais-Hits всегда переносит значение по умолчаниюслот с div (см. GitHub для объяснения). Единственная альтернатива, чтобы избежать этой проблемы, - создать свой собственный виджет с помощью mixin createWidgetMixin:

<template>
  <ol v-if="state">
    <li v-for="item in state.hits" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</template>

<script>
import { createWidgetMixin } from "vue-instantsearch";
import { connectHits } from "instantsearch.js/es/connectors";

export default {
  mixins: [createWidgetMixin({ connector: connectHits })]
};
</script>

Вот пример CodeSandbox .

Answer 2

Хотя @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>