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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda perlu memetakan data supaya teks yang diperlukan diformatkan sebagai atribut tunggal, atau gunakan teg
options属性删除，然后使用v-for手动创建<option>. p>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"}, ] }; } });