Vue条件列表渲染

Posted 2023-02-22

【中文标题】Vue条件列表渲染

【英文标题】：Vue conditional list rendering

【发布时间】：2021-11-01 10:14:31

【问题描述】：

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

【参考方案1】：

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

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