如何监听带use-input属性的q-select组件的实时输入内容？

问题描述 #

我计划实现一个地址自动补全搜索栏：最初尝试使用独立的q-input和q-select组件搭建，方案可正常运行——我监听q-input绑定的v-model值，调用地址自动补全API获取地址建议后，将建议结果展示在q-select下拉选项中。

但我希望合并q-input和q-select的能力，因此为q-select添加了use-input属性，可此时组件上绑定的v-model监听器不会在用户输入文本时触发。目前我能想到的唯一替代方案是保留两个独立组件：用q-input接收文本输入，用q-select承载结果选项，再通过自定义样式调整，让二者视觉效果和带use-input属性的单q-select组件一致。

解决方案 #

开启use-input属性后，q-select的v-model仅用于绑定用户最终选中的选项值，不会同步输入框内的实时输入文本，因此监听v-model无法捕获逐字输入的内容，这是组件的默认设计，不属于异常。

不需要拆分q-input和q-select做自定义样式对齐，直接用组件自带的输入值绑定能力即可实现需求：

• 通过input-value属性绑定存储实时搜索关键词的变量
• 监听@update:input-value事件，在事件回调中调用地址自动补全接口，更新下拉选项列表

Vue3 组合式API写法示例：

<template>
  <q-select
    v-model="selectedAddress"
    use-input
    clearable
    fill-input
    input-debounce="300"
    :input-value="searchKeyword"
    @update:input-value="handleSearchInput"
    :options="addressSuggestions"
    label="请输入收货地址"
    outlined
  />
</template>

<script setup>
import { ref } from 'vue'

// 最终选中的地址值
const selectedAddress = ref(null)
// 实时输入的搜索关键词
const searchKeyword = ref('')
// 接口返回的地址联想选项
const addressSuggestions = ref([])

const handleSearchInput = async (keyword) => {
  searchKeyword.value = keyword
  if (!keyword.trim()) {
    addressSuggestions.value = []
    return
  }
  // 替换为实际的地址自动补全接口调用逻辑
  // const { data } = await getAddressSuggestions(keyword)
  // addressSuggestions.value = data
}
</script>

实用配置提示 #

• 直接给组件传入input-debounce属性即可设置输入防抖时长（单位毫秒，推荐设为300），组件会自动对输入事件做防抖处理，不需要额外手写防抖逻辑，减少无意义的接口请求
• 可根据自身交互需求搭配常用属性调整体验：
  • fill-input：选中地址选项后，自动将选项的展示文本填充到输入框内
  • hide-dropdown-icon：隐藏下拉箭头图标，更贴近通用搜索栏的视觉效果
  • clearable：给输入框增加一键清空按钮

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