Vue.js 基于API返回categories数组的搜索下拉filter过滤不生效求助

现存核心问题 #

• 模板绑定逻辑错误：v-for中遍历的FilterCategories是定义在methods中的方法，模板中未加()执行该方法，相当于直接把方法引用当成遍历目标，根本不会触发内部的过滤逻辑
• 匹配规则不符合搜索预期：过滤判断使用category_name === inputValue全等匹配，要求输入框内容和分类名称完全一致才会展示结果，无法实现输入片段就匹配的模糊搜索效果
• 实现方式效率偏低：把列表过滤逻辑写在methods中，组件每次重渲染都会重复执行过滤计算，没有利用Vue的响应式缓存特性

修正后代码 #

Vue中列表过滤类逻辑适合放在计算属性中实现，计算属性会自动追踪依赖的响应式数据，只有当依赖的inputValue、categories发生变化时才会重新计算过滤结果，性能优于每次渲染都执行的methods方法。
修正后的完整可运行代码如下：

<template>
  <div class="dropdown">
    <input v-model.trim="inputValue" class="dropdown-input" type="text" placeholder="Find country" />
    <div v-show="inputValue" class="dropdown-list">
      <div 
        v-for="(category, index) in filteredCategories"
        :key="index" 
        class="dropdown-item"
      >
        {{ category.category_name }}
      </div>
    </div>
  </div>
</template>

<script>
import questionService from "../services/questionService";

export default {
  name: "postComponent",
  data() {
    return {
      inputValue: '',
      categories: [],
    };
  },
  computed: {
    filteredCategories() {
      // 输入为空时直接返回全量分类，避免清空输入后列表状态残留
      if (!this.inputValue) return this.categories
      // 统一转小写实现不区分大小写的模糊匹配
      const keyword = this.inputValue.toLowerCase()
      return this.categories.filter(category => {
        return category.category_name.toLowerCase().includes(keyword)
      })
    }
  },
  mounted() {
    questionService.getCategories().then((response) => {
      this.categories = response.data.response;
    });
  },
};
</script>

调整细节说明 #

• 修正了模板的遍历绑定，直接使用计算属性返回的过滤后数组渲染列表
• 将全等匹配替换为includes模糊匹配，支持输入部分内容即可匹配对应分类
• 匹配阶段统一做大小写转换，避免用户输入的大小写差异导致匹配失败
• 移除了原methods中无效的过滤方法，减少冗余代码

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