Vue条件列表渲染

Question

我正在处理分层导航元素，其中我在数组中的过滤器上有一个 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)，所有过滤器都会显示它们的所有选项。不仅仅是我点击的过滤器的选项数组。我该如何解决这个问题？

Answer 1

问题是有很多过滤器，但只有一个 showMoreFilters 标志。考虑向每个过滤器的 facetsettings 对象添加 showMore 属性...

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

Vue条件列表渲染

Vue conditional list rendering

for-loop

conditional-statements

vue.js

conditional-rendering