Quasar中q-select的@change事件无法触发methods函数问题

问题原因 #

你的代码存在两个核心问题：

1. 事件参数理解错误：Quasar的q-select组件@change事件的回调参数是选中的值/对象，而非原生DOM事件对象。你尝试访问event.target.value会导致event.target为undefined，引发报错后中断函数执行，所以看不到预期的alert效果。
2. 若函数完全未触发，需额外排查：methods是否正确挂载到Vue实例，事件绑定的函数名是否拼写无误。

修正方案 #

1. 调整事件回调的参数处理 #

修改getItem函数，直接接收选中的值，移除错误的DOM事件访问逻辑：

methods: {
    getItem(selectedValue) {
        alert(selectedValue); // 直接使用选中的值
    }
}

2. 优化模板中的事件绑定（可选） #

模板里的@change="getItem($event)"可简化为@change="getItem"，Quasar会自动将选中值作为参数传入：

<q-select 
  filled 
  v-model="invoice_product.tarrif_item_id"  
  @change="getItem" 
  use-input 
  input-debounce="0" 
  label="Search Item Name" 
  :options="options" 
  @filter="filterFn" 
  dense 
  behavior="menu" 
  class="q-ma-xs" 
  option-value="id" 
  option-label="name" 
  emit-value 
  map-options
>
  <template v-slot:no-option>
    <q-item>
      <q-item-section class="text-grey">
        No results
      </q-item-section>
    </q-item>
  </template>
</q-select>

额外说明 #

• 由于你设置了emit-value和option-value="id"，getItem接收的selectedValue就是选中选项的id值；
• 若未设置emit-value，则selectedValue会是包含id和name的完整选项对象。

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