Algolia 和 Vue InstantSearch：使用插槽自定义小部件

Question

我正在尝试修改 Vue 的 InstantSearch 小部件的输出。

在文档 (https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui) 中说，使用 scope-slot 它将覆盖小部件的完整 DOM 输出：

但这里似乎并非如此。这是我在下面使用带有简单<tr> 和<td> 元素的插槽的代码：

我没有在其中渲染 <tr> 和 <td>，而是在这里看到：

• 具有 ais-Hits 类的 div
• 具有 ais-Hits-list 类的嵌套 ol
• 具有 ais-Hits-item 类的嵌套 li

输出是这样的：

如果我去 inspect element 并删除我上面提到的元素（查看 div、ol 和 li 被删除）：

那么结果是正确的：

我做错了吗？ slot 不应该覆盖 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 create your own widget：

<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 为我指出了正确的路径，但我相信下面的代码可以帮助其他人解决与我相同的问题（使用 Algolia 结果填充 HTML 表格），而无需创建自定义小部件：

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