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

Я работаю с 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>

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


javascript vue.js laravel vue-instant-search laravel-scout
person Rohan    schedule 10.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Получил все переменные и вызовы методов оттуда

Это кастомная версия:

<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>
person Rohan    schedule 10.08.2018