Vue.js如何将组合框选中项绑定到对应输入框 解决多组件值串扰问题

两个组合框的输入字段绑定了同一个selectedValue变量，Vue的双向绑定机制会让所有绑定该变量的元素同步更新值，所以选择任意一个组合框的选项都会同时改动两个输入框的内容。

• 步骤1：调整data字段，定义两个独立的变量分别对应两个组合框的选中值

data() {
  return {
    // 分别存储两个组合框的选中值
    selectedWorkStatus: '',
    selectedDepartment: '',
    // 保留原有其他变量
    isActivate: '',
    workStatuses: [],
    departments: [],
    valueInput: null
  }
}

• 步骤2：修改HTML中两个输入框的v-model绑定
  工作状态组合框的input标签，将v-model="selectedValue"改为：
  v-model="selectedWorkStatus"
  部门组合框的input标签，将v-model="selectedValue"改为：
  v-model="selectedDepartment"
• 步骤3：调整选项点击方法isSelect，根据当前激活的组合框类型给对应变量赋值

methods: {
  // 下拉选项点击事件
  isSelect(item) {
    if(this.isActivate === 'workstatus') {
      // 根据业务需要存名称或id，示例存名称
      this.selectedWorkStatus = item.WorkStatusName
    } else if(this.isActivate === 'department') {
      this.selectedDepartment = item.DepartmentName
    }
    // 原有逻辑：选中后关闭下拉框
    this.isActivate = ''
  },
  // 原有下拉激活方法保留即可
  activateCbb(type) {
    this.isActivate = this.isActivate === type ? '' : type
  }
}

如果需要给组合框设置初始值，在created生命周期中分别给对应变量赋值即可：

created() {
  // 示例：设置默认选中值
  // this.selectedWorkStatus = '在职'
  // this.selectedDepartment = '研发部'
}

内容的提问来源于stack exchange，提问作者Viet Quang Fresher