Vue3数组过滤功能失效问题求助

问题根源 #

你的过滤逻辑本身是正确的，控制台能输出预期结果也证明了这一点，但页面没有更新的原因是：模板中循环渲染的是原始数组faqs，而非你维护的响应式过滤数组filteredFaqs。数据更新了，但页面没绑定到更新后的数据源，所以看不到过滤效果。

修复步骤 #

1. 修正模板的循环数据源
   把模板中v-for的遍历对象从faqs改成filteredFaqs：

<div class="accordion" v-for="(faq, index) in filteredFaqs" :id="faq.category" :key="index + 1">

2. 可选：简化按钮点击逻辑（非必须，但更简洁）
   不需要通过事件对象获取按钮值，直接把分类名作为参数传入过滤函数：

• 脚本部分修改filtering函数：

const filtering = (category) => {
  const filterValue = category.toLowerCase()
  console.log('category being filtered:', filterValue)
  filteredFaqs.value = faqs.filter(faq => faq.category.toLowerCase().includes(filterValue))
}

• 模板部分修改按钮：

<button @click="filtering('cat1')">cat1</button> 
<button @click="filtering('cat2')">cat2</button> 
<button @click="filtering('cat3')">cat3</button> 

额外优化建议 #

避免用index作为v-for的key，建议给每个FAQ对象添加唯一ID字段（比如id: 1），然后用:key="faq.id"，这样在数组过滤、排序时，Vue能更高效地更新DOM，避免潜在的复用问题。

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