Блог

Я работаю над многоуровневым элементом навигации, в котором у меня есть цикл v-for для фильтров в массиве. Фильтры, такие как цвет, размер, пол и т.д…

Поскольку количество опций в некоторых фильтрах может быть довольно большим (например,цвет), я хотел бы добавить кнопку, чтобы показать больше опций для каждого фильтра.

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

              <div v-if="showMoreFilters === false">
              <div
                v-for="(attribute, index) in filter.attributes"
                :key="attribute.index">
                  <div class="layered-navigation__item"
                    v-if="index < filter.facetsettings.nrofshownattributes"
                  >
                    <SfFilter
                      :label="attribute.title"
                      :count="attribute.nrofresults"
                      :selected="attribute.isselected"
                      @change="function(x)>
                    </SfFilter>
                  </div>
              </div>
            </div>
            <div v-else>
              <div
                v-for="attribute in filter.attributes"
                :key="attribute.index"
              >
                <div class="layered-navigation__item">
                    <SfFilter
                      :label="attribute.title"
                      :count="attribute.nrofresults"
                      :selected="attribute.isselected"
                      @change="function(x)">
                    </SfFilter>
                  </div>
                </div>
              </div>
            </div>
            <sfButton @click="showMoreFilters = !showMoreFilters">
                Show more filters"
            </sfButton>
 

Желаемое начальное количество опций фильтра для каждого фильтра задается в каждом фильтре:

 filter.facetsettings.nrofshownattributes
 

Проблема, однако, в том, что, если я нажму кнопку (showMoreFilters), все фильтры отобразят все свои параметры. Не только массив опций фильтра, на который я нажал. Как я мог бы решить эту проблему?

Проблема в том, что существует много фильтров, но только один флаг showMoreFilters. Рассмотрите возможность добавления showMore свойства к facetsettings объекту каждого фильтра…

 <div v-if="!filter.facetsettings.showMore">
...
<sfButton @click="filter.facetsettings.showMore != filter.facetsettings.showMore">
  Show more of just this filter"
</sfButton>