Vue分层导航点击单个筛选器展开按钮仅展开当前项如何解决？

问题根源 #

你当前使用了全局共享的单个showMoreFilters布尔变量控制所有筛选器的展开状态，状态修改后自然会同步作用到全部筛选器，才会出现点一个全部展开的问题。

解决方法 #

要实现单个筛选器独立控制展开，只需要把展开状态和每个筛选器实例单独绑定即可，推荐两种实现方式：

方式1：给筛选器对象新增扩展字段（最简单） #

在你拿到筛选器列表数据的逻辑里，给每个filter对象新增isExpanded属性，初始值设为false：

// 示例：拿到接口返回的筛选器列表后初始化
this.allFilters = res.data.filters.map(filter => ({
  ...filter,
  isExpanded: false
}))

然后修改你原有的模板代码，把全局的showMoreFilters替换成每个filter自己的isExpanded属性即可，同时还可以优化掉两套重复的v-for逻辑：

<!-- 单个筛选器内部代码 -->
<div>
  <div
    v-for="(attribute, index) in filter.attributes"
    :key="attribute.index"
  >
    <div 
      class="layered-navigation__item"
      v-if="index < (filter.isExpanded ? Infinity : filter.facetsettings.nrofshownattributes)"
    >
      <SfFilter
        :label="attribute.title"
        :count="attribute.nrofresults"
        :selected="attribute.isselected"
        @change="function(x)"
      />
    </div>
  </div>
  <sfButton @click="filter.isExpanded = !filter.isExpanded">
    {{ filter.isExpanded ? '收起' : 'Show more filters' }}
  </sfButton>
</div>

方式2：单独存储展开状态（不修改原数据） #

如果你不想修改接口返回的原filter对象，可以单独声明一个对象存储每个筛选器的展开状态，用筛选器的唯一ID作为key：

// Vue3示例，Vue2同理声明在data里
const expandedMap = ref({})

模板修改为：

<div>
  <div
    v-for="(attribute, index) in filter.attributes"
    :key="attribute.index"
  >
    <div 
      class="layered-navigation__item"
      v-if="index < (expandedMap[filter.id] ? Infinity : filter.facetsettings.nrofshownattributes)"
    >
      <SfFilter
        :label="attribute.title"
        :count="attribute.nrofresults"
        :selected="attribute.isselected"
        @change="function(x)"
      />
    </div>
  </div>
  <sfButton @click="expandedMap[filter.id] = !expandedMap[filter.id]">
    {{ expandedMap[filter.id] ? '收起' : 'Show more filters' }}
  </sfButton>
</div>

如果filter没有唯一ID，也可以用外层循环渲染筛选器的index作为key即可。

内容的提问来源于stack exchange，提问作者Craws