How to fetch the option value in Vue.js and use it in the @click event

Question

How to fetch the option value in Vue.js and use it in the @click event

Hi there, I'm still learning vue js and could use some help. I'm trying to retrieve the value of 'option-value' in q-select by passing 'department_id' in my functions. I am currently using quasar. However, whenever I run this code, it displays as undefined. What is the correct way to pass and display the data?

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

Here's a snippet of my vue file:

methods: {
    showFilteredEmployees(department_id){
console.log(department_id); // when executed, it returns as undefined 
    }
}

javascript vue.js

Answer 1

Answer №1

Upon reviewing your code, it seems that you have opted for a multiple selection input. Hence, you will need to traverse your model to retrieve the selected department_ids.

Moreover, in the

@click="showFilteredEmployees(department_id)"

part, there is no necessity to pass the department_id or the model variable. It should simply be @click="showFilteredEmployees". Just bear in mind that your model variable will be accessible throughout the scope of your component and can be accessed through the this object.

An example of a functioning code could look like 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>

As for the method:

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

If you have any further questions, feel free to ask.

Answer 2

Upon reviewing your code, it seems that you have opted for a multiple selection input. Hence, you will need to traverse your model to retrieve the selected department_ids.

Moreover, in the

@click="showFilteredEmployees(department_id)"

part, there is no necessity to pass the department_id or the model variable. It should simply be @click="showFilteredEmployees". Just bear in mind that your model variable will be accessible throughout the scope of your component and can be accessed through the this object.

An example of a functioning code could look like 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>

As for the method:

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

If you have any further questions, feel free to ask.

Answer 3

Answer №2

Although I am not familiar with the Quasar framework, based on your code it seems that department_id is the property in options that you want to use as the value for the select. In this case, you might consider updating

@click="showFilteredEmployees(department_id)"

to

@click="showFilteredEmployees(model)"

since model will represent the selected value in the q-select.

Answer 4

Although I am not familiar with the Quasar framework, based on your code it seems that department_id is the property in options that you want to use as the value for the select. In this case, you might consider updating

@click="showFilteredEmployees(department_id)"

to

@click="showFilteredEmployees(model)"

since model will represent the selected value in the q-select.

How to fetch the option value in Vue.js and use it in the @click event

Answer №1

Answer №2

Similar questions

Vue.js Google Places Autocomplete Plugin

Is it possible to use Node.js without resorting to template engines

When there is no data in the request body, ExpressJS will display it as empty

issue with angular promise not resolving properly

I'm having trouble obtaining access to an HTML element within the useEffect hook

Error: Authorization token is required

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

Event with no refresh required

Angular's onreadystatechange event is triggered when the state

Encountering unresponsive npm behavior post-prefix modification

What is preventing me from filling my array with the URL inputted by the user?

What is the best way to display prices for all days in a date range picker without having to use hover to show the price

Transfer the information entered in one set of input fields to another set of input fields by copying

What is better - JSON response objects with descriptive keys and larger responses, or concise keys and smaller responses?

Jquery is not working as expected

Submitting information from a single form to two separate URLs

How to switch between classes for elements and return to the original one when none of the elements is chosen

npm allows for multiple entry points for modules

Is it possible to display different alert messages based on the language chosen?

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?