vue.js - Algolia 和 Vue InstantSearch：使用插槽自定义小部件

Question

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

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

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

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

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

输出是这样的：

如果我去检查元素并删除上面提到的元素（查看如何删除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始终用 a 包裹默认插槽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 为我指出了正确的路径，但我相信下面的代码可以帮助与我有同样问题的其他人（使用 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>