javascript - Vue js如何获取option-value的值并传入@click

Question

抱歉，我是 vue js 新手。如何获取 q-select 中 option-value 的值。我在我的函数中传递了“department_id”。我正在使用类星体。当我运行它时，它显示未定义。 传递和显示数据的正确方法是什么？

<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>

我的vue:

methods: {
    showFilteredEmployees(department_id){
console.log(department_id); // i get undefined 
    }
}

Answer 1

正如我在您的代码中看到的，您选择了多个选择输入。因此，您必须遍历您的 model 才能获取选定的 department_id。

另一方面，对于 @click="showFilteredEmployees(department_id)"，您不需要传递 department_id 也不需要传递您的模型变量。它应该只是 @click="showFilteredEmployees"。只需考虑一下您的 model 变量将在组件的所有范围内可用，并且可以通过 this 对象进行访问。

例如，工作代码如下:

<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>

不要犹豫，尽管询问。