Javascript Vue js如何获取选项值的值并将其传递到@click

抱歉，我是vue js的新手。如何在q-select中获取选项值的值。我在我的职能中传递“部门id”。我用的是类星体。当我运行此命令时，它显示undefined。 传递和显示数据的正确方式是什么

<div class="col-3">
                <q-select 
                v-model="model" 
                :options="branches"
                multiple
                use-chips
                option-value="department_id"
                option-label="full_branchdept_name"
                label="Branch Department"
                class="select-branch-department"
                outlined dense />

            </div>
            <!-- :options="[]" -->
            <div class="col-9 q-mb-md">
                <!-- <div class="float-right">
                    <q-btn label="Generate from all device" class="bg-custom-orange text-capitalize text-white"></q-btn>
                </div> -->
                <div class="float-left">
                    <q-btn color="primary"
                    class="fetch-branch-department"
                    label="FETCH" 
                    @click="showFilteredEmployees(department_id)"
                    />
                </div>

---

我从未使用过Quasar框架，但通过查看您的代码department\u id是选项上属性的名称，您希望该属性成为select上的值，因此您可能需要更改

@click="showFilteredEmployees(department_id)"

到

---

as model将是q-select上的选定值。

我从未使用过Quasar框架，但通过查看您的代码department\u id是您希望作为select上的值的选项上属性的名称，因此您可能需要更改

@click="showFilteredEmployees(department_id)"

到

---

由于模型将是q-select上的选定值。

正如我在您的代码中看到的，您选择了一个

多个

选择输入。因此，您必须遍历您的

模型

，以获取所选的

部门id

s

另一方面，对于

@click=“showFilteredEmployees（department\u id）”

您不需要传递

department\u id

或

模型变量。它应该是
@click=“showFilteredEmployees”
。只需考虑您的<代码>模型<代码>变量将在您的组件的所有范围内可用，并且可以通过<<代码> < < /Cord>Objult.< /P>访问。
例如，工作代码可以如下所示：

<template>
  <div class="col-3">
    <q-select
      v-model="model"
      multiple
      use-chips
      :options="branches"
      option-value="department_id"
      option-label="full_branchdept_name"
      label="Branch Department"
      class="select-branch-department"
      outlined
      dense
    />
  </div>
  <div class="col-9 q-mb-md">
    <div class="float-left">
      <q-btn
        color="primary"
        class="fetch-branch-department"
        label="FETCH"
        @click="showFilteredEmployees"
      />
    </div>
  </div>
</template>



对于方法：

<script>
export default {
  name: "App",
  data() {
    return {
      model: [],
      branches: [
        { department_id: "1", full_branchdept_name: "Department 1" },
        { department_id: "2", full_branchdept_name: "Department 2" }
      ]
    };
  },
  methods: {
    showFilteredEmployees() {
      const filteredEmployees = this.model.map(employee => employee.department_id);
      console.log(filteredEmployees);
    }
  }
};
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
型号：[]，
分支机构：[
{部门id:“1”，部门全称：“部门1”}，
{部门id:“2”，部门全称：“部门2”}
]
};
},
方法：{
showFilteredEmployees（）{
const filteredEmployees=this.model.map（employee=>employee.department\u id）；
console.log（filteredEmployees）；
}
}
};

请不要犹豫
 正如我在您的代码中看到的，您选择了一个
多个
选择输入。因此，您必须遍历您的
模型
，以获取所选的
部门id
s

另一方面，对于
@click=“showFilteredEmployees（department\u id）”
您不需要传递
department\u id
或
模型变量。它应该是
@click=“showFilteredEmployees”
。只需考虑您的<代码>模型<代码>变量将在您的组件的所有范围内可用，并且可以通过<<代码> < < /Cord>Objult.< /P>访问。
例如，工作代码可以如下所示：

<template>
  <div class="col-3">
    <q-select
      v-model="model"
      multiple
      use-chips
      :options="branches"
      option-value="department_id"
      option-label="full_branchdept_name"
      label="Branch Department"
      class="select-branch-department"
      outlined
      dense
    />
  </div>
  <div class="col-9 q-mb-md">
    <div class="float-left">
      <q-btn
        color="primary"
        class="fetch-branch-department"
        label="FETCH"
        @click="showFilteredEmployees"
      />
    </div>
  </div>
</template>



对于方法：

<script>
export default {
  name: "App",
  data() {
    return {
      model: [],
      branches: [
        { department_id: "1", full_branchdept_name: "Department 1" },
        { department_id: "2", full_branchdept_name: "Department 2" }
      ]
    };
  },
  methods: {
    showFilteredEmployees() {
      const filteredEmployees = this.model.map(employee => employee.department_id);
      console.log(filteredEmployees);
    }
  }
};
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
型号：[]，
分支机构：[
{部门id:“1”，部门全称：“部门1”}，
{部门id:“2”，部门全称：“部门2”}
]
};
},
方法：{
showFilteredEmployees（）{
const filteredEmployees=this.model.map（employee=>employee.department\u id）；
console.log（filteredEmployees）；
}
}
};

请不要犹豫