如何在 vue 即时搜索中创建自定义细化列表？答案

【问题标题】：How to create a custom refinement list in vue instant search?如何在 vue 即时搜索中创建自定义细化列表？
【发布时间】：2019-01-17 14:31:27
【问题描述】：

我正在使用 Laravel Scout 和 alogolia 作为驱动程序。由于前端有vue，所以试用了vue即时搜索包，效果非常好。

我面临的问题是我需要将其自定义为我们正在使用的应用内样式。

Refinement Section

这是我正在尝试自定义的特定组件。它尝试了像Styling Section 中显示的那样骑乘这些课程，但这对我来说并不适用，因为我需要在其中添加更多标签和属性。

<ais-refinement-list attribute-name="categories.title" inline-template>
      <div class="column w-1/5">
            Hello
      </div>
</ais-refinement-list>

现在我知道我可以开始编写这样的内联模板了，但我还不明白如何获取优化的值，以便我可以制作复选框，以及如何将它们发送回组件一次他们被选中。任何帮助表示赞赏。

【问题讨论】：

标签： javascript laravel vue.js laravel-scout vue-instant-search

【解决方案1】：

我自己挖掘了here 的包，然后在here 中找到了模板。由于某种原因，我在供应商代码中看不到这一点。

从那里获取所有变量和方法调用

这是自定义版本：

<ais-refinement-list attribute-name="categories.title" inline-template>
    <div class="column w-1/5">
        <h3>Categories</h3>
        <hr class="my-3">
        <div class='column w-full mb-4' v-for="facet in facetValues">
            <div class="checkbox-control mb-4">
                <input type="checkbox" :id="facet.name" :value="facet.name" v-model="facet.isRefined" @change="toggleRefinement(facet)"/>
                <label :for="facet.name">{{ facet.name }} ({{ facet.count }})</label>
            </div>
        </div>
    </div>
</ais-refinement-list>

【讨论】：