• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

221
Views
get selected "value" of declared text-field / BootstrapVue

I have a b-form-select field and emit my value-field to my parent, but I need the selected text-field too..

Here is the needed code to show what I mean:

In my template:

<b-form-select v-model="selected" :options="getOptions" text-field="Name" value-field="Rank"></b-form-select>

but if I console.log(this.selected), I get of course the value Rank which I have selected. But is it also possible to get the text-field ?

Here is my script to show how my selected works:

computed: {
 getOptions() {
    const array = [];
    const person = this.data.find((i) => i.name === this.name);
    for (let key in person.persons) {
      array.push(person.persons[key]);
    }
    return array;
  },
}

my json data:

[
    {
        "name": "XXX",
        "persons": {
            "1": {
                "Name": "Max",
                "Rank": "1"
                },
            "2": {
                "Name": "Peter",
                "Rank": "2"
            },
            "3": {
                "Name": "Harry",
                "Rank": "1"
            },
            "4": {
                "Name": "Jake",
                "Rank": "0"
            }

        }
    },
]
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

As you have the value available, as well as the list of options you can simply add a new computed field to get the selected values text-field

computed: {
 getOptions() {
    const array = [];
    const person = this.data.find((i) => i.name === this.name);
    for (let key in person.persons) {
      array.push(person.persons[key]);
    }
    return array;
  },
  selectedOption() {
    if (!this.selected) {
      return null;
    }

    return Object.values(this.getOptions).find((option) => {
      return option.Rank === this.selected;
    });
  }
}

Then access selectedOption.Name or selectedOption.Rank. If you put the Name and Rank into variables / data attributes as well you can also make it more generic.

Update:

Changed to Object.values

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error