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>，而是在这里看到：

A div class 为 ais-Hits
一个嵌套的 ol 与 class 的 ais-Hits-list
一个嵌套的 li 与 class 的 ais-Hits-item

输出是这样的：

如果我转到 检查元素 并删除我上面提到的元素（请参阅 div、ol和li被删除):

则结果正确：

我是不是做错了什么？插槽不应该覆盖 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 for the explaination). The only alternative to avoid this issue is to create your own widget 和 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>

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

Algolia & Vue InstantSearch: Customising widgets with slot

vue.js

algolia

vue-instant-search