基于组合式API的Quasar q-select对象数组过滤配置问题

问题场景 #

我找不到用组合式API实现q-select对象数组过滤的示例，现有场景：

• 使用Quasar的q-select组件，通过Axios请求获取选项数据，数据格式为对象数组：

[{description: "Apple Inc.", displaySymbol: "AAPL"}, {description: "Microsoft", displaySymbol: "MSFT"}]

• 响应包含约2万条记录，已实现展示所有数据，但不知道如何设置过滤函数实现搜索功能。现有代码中filterFn逻辑错误，Quasar官方示例均针对简单数组，不清楚对象数组的处理方式。

修正后的实现代码 #

模板部分（无需修改核心结构，仅优化防抖配置） #

<q-select
  class="grey-7"
  filled
  v-model="addStockSymbol"
  use-input
  input-debounce="300" <!-- 加防抖避免2万条数据频繁过滤导致性能问题 -->
  label="Add New Stock Symbol"
  :options="stockTickers"
  option-label="description"
  option-value="displaySymbol"
  @blur="addPosition"
  @filter="filterFn"
  behavior="menu"
>
  <template v-slot:no-option>
    <q-item>
      <q-item-section class="text-grey">
        No results
      </q-item-section>
    </q-item>
  </template>
</q-select>

脚本部分（重点修正过滤逻辑） #

<script>
import { ref, defineComponent, onMounted } from 'vue'
import { usePortfolioStore } from '../stores/portfolio-store'
import { storeToRefs } from 'pinia'
import { finnhubAPI } from 'boot/axios'

export default defineComponent({
  name: 'UploadPositions',
  setup () {
    // 响应式变量
    const addStockSymbol = ref('')
    const addShareCount = ref('')
    const stockTickers = ref([])
    const originalStockTickers = ref([]) // 保存全量原始数据，用于过滤后恢复

    // 加载数据
    const loadData = () => {
      finnhubAPI.get('/api/v1/stock/symbol?exchange=US&token=tedkfjdkfdfd')
        .then((response) => {
          originalStockTickers.value = response.data // 存储全量原始数据
          stockTickers.value = response.data // 初始化展示全部选项
        })
        .catch(() => {
          console.log('API request failed')
        })
    }

    // 核心过滤函数
    const filterFn = (val, update) => {
      update(() => {
        if (val === '') {
          // 输入为空时恢复全量数据
          stockTickers.value = originalStockTickers.value
          return
        }
        const lowerVal = val.toLowerCase()
        // 针对对象的两个属性做模糊匹配
        stockTickers.value = originalStockTickers.value.filter(item => {
          return item.description.toLowerCase().includes(lowerVal) || 
                 item.displaySymbol.toLowerCase().includes(lowerVal)
        })
      })
    }

    // 挂载时加载数据
    onMounted(() => {
      loadData()   
    })

    // 注：portfolio、addPosition等变量需确保在setup中定义或从store获取，此处保留原返回结构
    return {
      addStockSymbol, 
      addShareCount, 
      portfolio, 
      addPosition, 
      deletePosition, 
      loadData, 
      stockTickers, 
      modifyTickerData, 
      filterFn
    }
  }
})
</script>

关键说明 #

1. 保存原始数据：新增originalStockTickers存储全量数据，避免过滤后无法恢复全部选项
2. 正确使用Quasar过滤回调：必须通过update回调更新选项，这是Quasar组件的要求
3. 对象属性匹配：过滤时针对description（公司名）和displaySymbol（股票代码）做小写模糊匹配，提升搜索体验
4. 性能优化：设置input-debounce减少高频过滤触发，避免2万条数据频繁计算导致卡顿

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