Как создать собственный список уточнений в мгновенном поиске?

Question

Я работаю с Laravel Scout и alogolia в качестве водителя. Поскольку у меня есть vue на переднем крае, я попробовал пакет мгновенного поиска vue, который работает очень хорошо.

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно настроить ее в соответствии со стилями приложения, которые мы используем.

Раздел уточнения

Это конкретный компонент, который я пытаюсь настроить. Он попробовал перебрать классы, как они показывают в разделе "Стилирование", но это мне не поможет, так как мне нужно добавить туда больше тегов и атрибутов.

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

Теперь я знаю, что могу начать писать встроенный шаблон примерно так, но я пока не понимаю, как получить значения для уточнений, чтобы я мог установить флажки и, более того, как отправить их обратно в компонент после их выбора., Любая помощь приветствуется.

Answer 1

Я выкопал сам пакет здесь и затем нашел шаблон внутри здесь. По какой-то причине я не мог видеть это в коде поставщика.

Там есть все переменные и вызовы методов

Это пользовательская версия:

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