Get two values ​​of json into <b-form-select> text field

Question

I'm using BootstrapVue.

I have a json with the following structure:

[
    {"ID": "123", "Name": "Harry", "Age": "22"},
    {"ID": "456", "Name": "Harry", "Age": "18"},
    {"ID": "789", "Name": "Peter", "Age": "20"},
    {"ID": "159", "Name": "Peter", "Age": "19"},
]

So at least, to be clear, each data - based on Name and Age together - is unique and has no ID (!). This is just an example for easier understanding.

What I'm trying to do now is display Name in <b-form-select> and Age in the following brackets. For example: Peter (20).

Now I have the following code:

<b-form-select :options="sortedPersons" text-field="Name" value-field="ID"></b-form-select>

I need to pass value to my parent.vue but want to display text in it. So I decided to do it.

The only thing I need now is attention. This example is just to show what I want:

:text-field="'Name' ' ' '(' 'Age' ')'" But this doesn't work.

How to make it run?

Additional Information - I sort my json before running it in compulated.

sortedPersons() {
  var array = this.json.map((input) => input);
  return array.sort((a, b) => {
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  });
},

Thanks in advance!

Answer 1

You need to map the data so that the required text is formatted into a single property, or use options property removal and then create manually using v-for< option> tag.

new Vue({
  el: "#app",
  data() {
    return {
      selected: '',
      options: [
          {"ID": "123", "Name": "Harry", "Age": "22"},
          {"ID": "456", "Name": "Harry", "Age": "18"},
          {"ID": "789", "Name": "Peter", "Age": "20"},
          {"ID": "159", "Name": "Peter", "Age": "19"},
      ]
    };
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/<a href=" cdn-cgi="" l="" email-protection"="" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2e9f2ef">[email protected]/dist/css/bootstrap.min.css" />
sssccc
sssccc


<div id="app" class="p-4">
  <b-select v-model="selected">
    <option v-for="option in options" :key="option.ID" :value="option.ID">
      {{ option.Name }} ({{ option.Age }})
    </option>
  </b-select>

  Selected: {{ selected }}
</div>