Vue+Quasar：如何获取q-select的option-value值并传入@click事件

嘿，我来帮你搞定这个问题～你遇到的undefined问题，核心原因是你直接传递的department_id并不是当前组件中存在的变量——q-select的选中值其实存在你绑定的v-model="model"里，尤其是你设置了multiple属性，这个model会是一个数组，用来存储所有选中的department_id。

下面是具体的修改步骤：

1. 确保v-model的变量正确声明 #

首先，在组件的data里声明model，因为开启了多选，所以初始值要设为空数组：

data() {
  return {
    model: [], // 存储选中的多个department_id
    branches: [] // 你的分支部门数据，确保每个对象都有department_id和full_branchdept_name字段
  }
}

2. 修改按钮的点击事件参数 #

把点击事件里的department_id换成绑定的model，这样才能拿到选中的值：

<div class="float-left">
  <q-btn color="primary" class="fetch-branch-department" label="FETCH" @click="showFilteredEmployees(model)" />
</div>

3. 调整方法接收参数的逻辑 #

因为是多选，所以方法接收的参数是一个数组，你可以根据需求遍历或者处理这些选中的ID：

methods: {
  showFilteredEmployees(selectedDepartmentIds){
    console.log(selectedDepartmentIds); // 现在就能正常输出选中的所有department_id了
    // 举个例子：如果需要遍历每个ID做后续操作
    selectedDepartmentIds.forEach(id => {
      console.log('选中的部门ID：', id);
    });
  }
}

额外提示 #

• 如果你不需要多选，只需要去掉q-select上的multiple属性，此时model会变成单个值，方法里直接使用selectedDepartmentIds即可（不用遍历）。
• 一定要确保你的branches数组里的每个对象都包含department_id字段，否则q-select无法正确提取选中值。

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