Quasar q-select组件筛选时输入内容重复异常求助

以下是几个大概率能解决问题的排查方向：

• 检查筛选函数filterFn的实现逻辑
  这是最常见的问题根源：如果你的筛选函数直接修改了原options数组（比如用push、concat往数组里追加内容），而非基于原始数据源重新生成过滤结果，就会导致每次输入关键词都往数组里添加重复项。
  正确的做法是维护一份原始数据副本，每次筛选都从原始数据里过滤，再把结果赋值给绑定的选项数组，同时要使用Quasar要求的update回调包裹赋值操作：

  // 组件data里定义变量
  data() {
    return {
      rawPartnerList: [], // 存储完整的原始选项数据
      filteredPartners: [], // 绑定到q-select的过滤后数据
      chosenPartner: null
    }
  },
  // 假设从接口获取数据后，先存到原始副本
  async mounted() {
    const res = await fetch('/api/partners')
    this.rawPartnerList = res.data
    this.filteredPartners = [...this.rawPartnerList]
  },
  // 筛选函数实现
  methods: {
    filterFn(val, update) {
      if (!val) {
        update(() => {
          this.filteredPartners = [...this.rawPartnerList]
        })
        return
      }
      update(() => {
        const keyword = val.toLowerCase()
        this.filteredPartners = this.rawPartnerList.filter(item => 
          item.name.toLowerCase().includes(keyword)
        )
      })
    }
  }
  

  之后把q-select的:options改为绑定filteredPartners即可。

• 排查原始数据是否本身存在重复
  打印你的原始options数组，检查是否有id（即option-value指定的字段）重复的项。q-select是通过option-value识别唯一选项的，如果原始数据里有重复的id，组件渲染时就会出现重复选项。

• 调整input-debounce参数
  你设置了input-debounce="0"关闭输入防抖，极端情况下会导致筛选函数被高频触发，可能引发数组重复赋值的问题。可以尝试改成input-debounce="100"，既不影响用户体验，又能减少不必要的筛选触发。

• 避免直接修改父组件传递的数据源
  如果你的options是父组件传递过来的props，不要直接在筛选函数里修改这个props数组，而是在组件内部深拷贝一份作为原始数据副本，比如：

  props: ['options'],
  data() {
    return {
      rawPartnerList: JSON.parse(JSON.stringify(this.options))
    }
  }
  

内容的提问来源于stack exchange，提问作者Tamás László