Holen Sie sich zwei JSON-Werte in das Textfeld <b-form-select>

Question

Ich verwende BootstrapVue.

Ich habe einen JSON mit der folgenden Struktur:

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

Um es klarzustellen: Alle Daten basieren auf Name 和 Age 一起 - 都是唯一，也没有 ID (!). Dies ist nur ein Beispiel zum leichteren Verständnis.

Was ich jetzt versuche, ist in <b-form-select> 中显示 Name ，并在后面的括号中显示 Age . Zum Beispiel: Peter (20).

Jetzt habe ich folgenden Code:

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

Ich muss value 传递给我的 parent.vue platzieren, möchte aber Text darin anzeigen. Also habe ich beschlossen, es zu tun.

Das Einzige, was ich jetzt brauche, ist Aufmerksamkeit. Dieses Beispiel soll nur zeigen, was ich will:

:text-field="'姓名' + ' ' + '(' + '年龄' + ')'" Aber das funktioniert nicht.

Wie gelingt das?

Zusätzliche Informationen - Ich habe es vorher sortiert 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;
  });
},

Vielen Dank im Voraus!

Answer 1

您需要映射数据，以便将所需的文本格式化为单个属性，或者使用 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" />





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

  Selected: {{ selected }}