Obtenez deux valeurs de json dans le champ de texte <b-form-select>

Question

J'utilise BootstrapVue.

J'ai un json avec la structure suivante :

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

Donc au moins, pour être clair, chaque donnée est basée sur Name 和 Age 一起 - 都是唯一，也没有 ID (!). Ceci est juste un exemple pour une compréhension plus facile.

Ce que j'essaie de faire maintenant est en <b-form-select> 中显示 Name ，并在后面的括号中显示 Age . Par exemple : Pierre (20).

Maintenant, j'ai le code suivant :

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

Je dois placer value 传递给我的 parent.vue mais je souhaite afficher du texte à l'intérieur. J'ai donc décidé de le faire.

La seule chose dont j’ai besoin en ce moment, c’est d’attention. Cet exemple est juste pour montrer ce que je veux :

:text-field="'姓名' + ' ' + '(' + '年龄' + ')'" Mais ça ne marche pas.

Comment le faire fonctionner ?

Informations complémentaires - Je l'ai déjà trié compulated 中运行我的 json.

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;
  });
},

Merci d'avance !

Answer 1

Vous devez mapper les données afin que le texte requis soit formaté comme un seul attribut, ou utiliser la balise options 属性删除，然后使用 v-for 手动创建 <option>.

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"},
      ]
    };
  }
});

[email protected]/dist/css/bootstrap.min.css" />
sssccc
sssccc



  
    
      {{ option.Name }} ({{ option.Age }})
    
  

  Selected: {{ selected }}