Vue conditional list rendering

Question

I am working on a Layered Navigation element where I have a v-for loop on filters in an array. Filters like color, size, gender etc...

Since the amount of options in some the filters can be quite overwhelming (color for example),I would like to add a button to show more options per filter.

I currently have the following function to show more options per filter

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

The desired, initial, amount of filter-options per filter is given within each filter:

filter.facetsettings.nrofshownattributes

The problem, however, is that if I press the button (showMoreFilters), all filters show all of their options. Not just the array of option of the filter I clicked on. How could I resolve this?

Answer 1

The problem is that there are many filters but only one showMoreFilters flag. Consider adding a showMore property to every filter's facetsettings object...

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