Vue.js 阿尔戈利亚酒店；Vue InstantSearch：使用插槽自定义小部件

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

在文档（）中，它表示使用范围槽将覆盖小部件的完整DOM输出：

但这里的情况似乎并非如此。下面是我的代码，使用带有简单

和

元素的插槽：

我看到的不是在

中呈现

，而是：

• Adiv具有ais点击率的类别
• 嵌套的ol，其类为ais点击列表
• 一个嵌套的li，其类为ais Hits item

输出如下：

如果我去检查元素并删除上面提到的元素（请参见如何删除div、ol和li）：

那么结果是正确的：

我做错什么了吗？插槽不应该覆盖DOM输出并将其余部分留给开发人员进行样式设置吗

任何帮助都将不胜感激

您必须使用插槽，而不是

项

。您将完全控制渲染

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

下面是一个关于的示例。
尽管@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>


名称
描述
尽管@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>


名称
描述
谢谢您的回复！我设法删除了ol和li，但创建了一个带有class=“ais Hits”的div，打破了表格。有没有办法避免这个div？有了这些插槽，您就无法摆脱顶级的
div
。这是Vue的一个限制，根元素不能是插槽或模板。唯一的替代方法是使用mixin创建自定义小部件。我已经更新了答案。谢谢回复！我设法删除了ol和li，但创建了一个带有class=“ais Hits”的div，打破了表格。有没有办法避免这个div？有了这些插槽，您就无法摆脱顶级的
div
。这是Vue的一个限制，根元素不能是插槽或模板。唯一的替代方法是使用mixin创建自定义小部件。我已经更新了答案。这应该是最好的答案