我正在使用 BootstrapVue。
我有一个具有以下结构的 json：
[
{"ID": "123", "Name": "Harry", "Age": "22"},
{"ID": "456", "Name": "Harry", "Age": "18"},
{"ID": "789", "Name": "Peter", "Age": "20"},
{"ID": "159", "Name": "Peter", "Age": "19"},
]
所以至少，为了明确一点，每个数据 - 基于 Name 和 Age 一起 - 都是唯一，也没有 ID （！）。这只是为了更容易理解而举的例子。
我现在尝试做的是在 <b-form-select> 中显示 Name ，并在后面的括号中显示 Age 。例如：Peter (20)。
现在我有以下代码：
<b-form-select :options="sortedPersons" text-field="Name" value-field="ID"></b-form-select>
我需要将 value 传递给我的 parent.vue 但想在其中显示文本。所以我决定这样做。
我现在唯一需要的就是获得关注。这个例子只是为了展示我想要的：
:text-field="'姓名' ' ' '(' '年龄' ')'"，但这不起作用。
如何让它运行？
其他信息 - 我在 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;
});
},
提前致谢！
您需要映射数据，以便将所需的文本格式化为单个属性，或者使用
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"}, ] }; } });