Vue动态添加类至元素：按钮激活状态保留问题求助

问题根源 #

showResults方法里直接执行了selectedFilter.value.active = false，强制将选中过滤器的激活状态设为关闭，这就是导致按钮激活类和对应p标签显示状态丢失的核心原因。

解决方案步骤 #

1. 移除showResults中强制关闭激活状态的代码

直接删掉那行修改active的代码，避免覆盖原有状态：

const showResults = () => {
  console.log('Mostrar resultados')
  landsStore.lands = []
  landsStore.landsadd = []
  // 移除该行：selectedFilter.value.active = false
  landsStore.fetchLands('', { filters: filtersStore.getAllFiltersAlgoliaFormat, facetFilters: filtersStore.getAllFacetFilterFormat })
}

2. 修复模板中的条件判断错误与冗余

原模板存在语法错误（单个&应为&&）和逻辑冗余，用数组includes简化判断，让逻辑更清晰：

<button 
  v-for="filter in addedFilters" 
  :key="filter.textValue" <!-- 用textValue作为key更稳妥，避免重复对象导致的渲染问题 -->
  :value="filter.textValue" 
  @click="(e) => openInfoFiltro(filter, e)" 
  :class="{
    'filter-active': filter.active && !optionButtonValue.includes(filter.textValue),  
    'active-filter-options': filter.active && optionButtonValue.includes(filter.textValue)
  }">
      <div>
         <!-- 简化特殊按钮组的反向判断 -->
         <p v-if="filter.active && !optionButtonValue.includes(filter.textValue)" class="m-0">
           {{ $filters.numeralFormatBtnInfo(filter.info[0]) }} - {{$filters.numeralFormatBtnInfo(filter.info[1]) }}
         </p>

         <!-- 修复原逻辑中多个&&无法同时成立的错误，用includes统一判断特殊按钮组 -->
         <p v-else-if="filter.active || optionButtonValue.includes(filter.textValue)" class="m-0 amount"> 
             <span v-if="filter.info">({{filter.info === 0 ? '' : filter.info }})</span>
         </p>

         <p class="m-0">{{filter.textValue}}</p>
      </div>
  </button>

说明 #

• 移除showResults中的active赋值后，原有激活的过滤器状态会被保留，按钮的激活类和对应p标签显示状态自然不会丢失。
• 模板中用optionButtonValue.includes(filter.textValue)替代重复的textValue判断，既简化代码又避免逻辑错误，同时修复了位运算符号&的误用（应为逻辑与&&）。

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