Dapatkan dua nilai json ke dalam medan teks <b-form-select>

Question

Saya menggunakan BootstrapVue.

Saya mempunyai json dengan struktur berikut:

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

Jadi sekurang-kurangnya, untuk menjadi jelas, setiap data - adalah berdasarkan Name 和 Age 一起 - 都是唯一，也没有 ID (!). Ini hanya contoh untuk memudahkan pemahaman.

Apa yang saya cuba lakukan sekarang adalah dalam <b-form-select> 中显示 Name ，并在后面的括号中显示 Age . Contohnya: Peter (20).

Kini saya mempunyai kod berikut:

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

Saya perlu meletakkan value 传递给我的 parent.vue tetapi mahu memaparkan teks di dalamnya. Jadi saya memutuskan untuk melakukannya.

Satu-satunya perkara yang saya perlukan sekarang ialah perhatian. Contoh ini hanya untuk menunjukkan apa yang saya mahu:

:text-field="'姓名' + ' ' + '(' + '年龄' + ')'" Tetapi ini tidak berkesan.

Bagaimana untuk menjadikannya berfungsi?

Maklumat tambahan - Saya telah menyusunnya sebelum ini 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;
  });
},

Terima kasih terlebih dahulu!

Answer 1

Anda perlu memetakan data supaya teks yang diperlukan diformatkan sebagai atribut tunggal, atau gunakan teg 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 }}