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?

danh · Accepted Answer · 2021-09-03 02:24:01Z

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>

answered Sep 3, 2021 at 2:24

danh

62.7k10 gold badges100 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue conditional list rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related