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

Question

我正在与 Laravel Scout 和 alogolia 一起工作 driver。由于我在前端有vue，所以我尝试了vue即时搜索包，效果非常好。

我面临的问题是我需要根据我们正在使用的应用内样式对其进行自定义。

这是我要自定义的特定组件。它尝试过骑类就像他们在 Styling Section 中显示的那样，但这对我来说不起作用，因为我需要在其中添加更多标签和属性。

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

现在我知道我可以像这样开始编写内联模板了，但我还不明白的是如何获取改进的值以便我可以制作复选框以及如何将它们发送回组件一旦被选中。感谢任何帮助。

Answer 1

我自己翻包here and then found the template inside 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>

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

How to create a custom refinement list in vue instant search?

javascript

laravel

vue.js

laravel-scout

vue-instant-search