Vue 2中两个ProjectsSearchBar组件加载数据冲突问题求助

你的问题核心是多个组件实例共享了同一个防抖函数，导致它们的API请求逻辑互相干扰，进而出现只有一个组件能正常加载、另一个无限加载的情况。以下是具体的排查和修复步骤：

1. 修复防抖函数的实例隔离问题 #

在Vue 2中，组件的methods是挂载在组件构造函数的原型上的，如果你直接用debounce包装methods中的函数，所有组件实例会共享这同一个防抖函数实例。当两个组件触发搜索时，防抖逻辑会互相覆盖，导致只有一个实例的请求能正常执行，另一个的加载状态无法正确重置。

修复方式：移除methods中的searchDebounce定义，改为在组件的created钩子中为每个实例创建独立的防抖函数：

created() {
  this.searchDebounce = debounce(() => {
    this.fetchProjects();
  }, 300);
}

这样每个ProjectsSearchBar实例都会拥有自己的防抖函数，互相之间不会干扰。

2. 补全未定义的属性 #

你的组件代码中用到了clientIds、statuses、selectedJobType三个变量，但未在props或data中定义，这会导致逻辑报错或请求参数异常：

• selectedJobType：在itemHourlyRate计算属性中被引用，未初始化会导致渲染报错。
• clientIds、statuses：作为API请求参数使用，未定义会导致请求参数缺失，可能触发错误或返回空数据。

修复方式：

• 在data中初始化selectedJobType：

  data: () => ({
    selected: [],
    searchProject: '',
    isLoadingData: true,
    projects: [],
    selectedJobType: null // 补充初始化
  })
  

• 若clientIds、statuses是父组件传入的参数，在props中声明：

  props: {
    value: {
      // 原有value的定义
    },
    clientIds: {
      type: Array,
      default: () => []
    },
    statuses: {
      type: Array,
      default: () => []
    }
  }
  

• 若这两个值来自Vuex，在computed中添加对应的getter：

  computed: {
    // ...其他计算属性
    clientIds() {
      return this.$store.getters['yourModule/clientIds'];
    },
    statuses() {
      return this.$store.getters['yourModule/statuses'];
    }
  }
  

3. 验证组件状态的独立性 #

Vue 2组件的data采用函数形式，你当前的写法是正确的，每个实例会拥有独立的状态对象（searchProject、isLoadingData、projects等），这部分无需修改，但防抖函数的问题是核心矛盾点。

4. 确认API请求的唯一性 #

修复上述问题后，可通过浏览器开发者工具的Network面板查看请求，确认两个组件的API请求参数（如project_name、client_id）是否各自对应组件的搜索状态，确保请求独立发送。

内容的提问来源于stack exchange，提问作者Robert Juszczyński