Quasar框架Q-Select组件筛选功能失效问题求助

核心问题 #

1. 变量名拼写错误：filterFn中错误使用regionsOption（少了末尾的s），而组件绑定的是regionsOptions，导致筛选结果无法传递给组件。
2. 初始选项为空：regionsOptions初始是空白数组，打开下拉框时没有默认选项。
3. 筛选逻辑单一：仅匹配value字段，用户输入标签文本时无法触发筛选。

修复方案 #

1. 修正变量名 #

将filterFn里的this.regionsOption改为this.regionsOptions，确保筛选结果正确绑定到组件的options属性。

2. 初始化默认选项 #

在组件created钩子中加载全部区域选项，打开下拉框时能直接看到完整列表：

created() {
  this.regionsOptions = [...this.regions];
}

3. 优化筛选逻辑（可选） #

同时匹配label和value字段，提升用户输入的灵活性：

filterFn(val) {
  if (!val) {
    this.regionsOptions = [...this.regions];
    return;
  }
  const needle = val.toLowerCase();
  this.regionsOptions = this.regions.filter(v => {
    return v.label.toLowerCase().includes(needle) || v.value.toLowerCase().includes(needle);
  });
}

完整修复代码 #

<template>
  <q-select
    v-model="model"
    use-input
    :options="regionsOptions"
    @filter="filterFn"
  >
  </q-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      regions: [
        {
          "label": "Help",
          "value": "help",
          "lat": 57.6215477,
          "lon": 39.8977411
        },
        {
          "label": "Hello",
          "value": "hello",
          "lat": 57.6215477,
          "lon": 39.8977411
        }
      ],
      regionsOptions: [],
    }
  },
  created() {
    this.regionsOptions = [...this.regions];
  },
  methods: {
    filterFn(val) {
      if (!val) {
        this.regionsOptions = [...this.regions];
        return;
      }
      const needle = val.toLowerCase();
      this.regionsOptions = this.regions.filter(v => {
        return v.label.toLowerCase().includes(needle) || v.value.toLowerCase().includes(needle);
      });
    },
  }
}
</script>

验证步骤 #

• 打开下拉框，确认显示全部2个选项
• 输入h、Help或hello，确认筛选结果正确
• 选中选项后，检查model是否正确获取选中的value值

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