Question

我正在使用Laravel Scout和alogolia作为驱动程序。由于我在前端安装了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的程序包，然后在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即时搜索中创建自定义优化列表？

1 个答案: