Vue StoreFront extend filters with search input

Get Help
#1

I’m just beginning with Vue and use it within VueStoreFront. I’ve made a collapsible read more/less button for showing more or less filters. The issue I’m having is that I would like to extend it with a input to search within the filters…but don’t really know how to search with the available filters… If you can put me in the right direction I would really appreciate it! Here’s the code which I have right now:

<div class="filters">
      <template v-for="(filters, filterType) in availableFilters">
        <div class="filter-block" :key="filterType + 'filter'">
          <SfHeading
            :level="4"
            :title="$t(filterType)"
            :key="filterType"
            class="filters__title sf-heading--left"
          />
          <div v-if="filterType == 'dws_kleurenfilter_filter' || filterType == 'manufacturer_filter'">
            <input type="text" v-model="searchFilter">
          </div>
          <div class="filter-block__section">
            <template>
              <SfFilter
                v-for="filter in filters.slice(0,readMoreShow)"
                :key="filter.id"
                :label="filter.label"
                :count="filter.count"
                :color="filter.color"
                :selected="isFilterActive(filter)"
                class="filters__item"
                @change="changeFilter(filter)"
              />
              <SfFilter
                v-for="filter in filters.slice(readMoreShow,20)"
                v-show="readMore[filterType]"
                :key="filter.id"
                :label="filter.label"
                :count="filter.count"
                :color="filter.color"
                :selected="isFilterActive(filter)"
                class="filters__item"
                @change="changeFilter(filter)"
              />
              <button @click="showMore(filterType)" v-if="!readMore[filterType] && filters.length > readMoreShow" class="sf-button sf-button--text">
                {{ $t('Show more') }}<SfIcon size="32px" color="#BEBFC4" icon="chevron_down" />
              </button>
              <button @click="showLess(filterType)" v-if="readMore[filterType] && filters.length > readMoreShow" class="sf-button sf-button--text">
                {{ $t('Show less') }}<SfIcon size="32px" color="#BEBFC4" icon="chevron_up" />
              </button>
            </template>
          </div>
        </div>
      </template>
    </div>

Thanks in advance!
Chris

#2

Hello

  1. You should have searchFilter for each filter (not only one)
  2. Instead of filters.slice(0,readMoreShow) you should have computed property which picks filters based on searchFilter. Inside you could use JS’ match method