将 json 的两个值获取到 <b-form-select> 文本字段中

Question

我正在使用 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;
  });
},

提前致谢！

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" />
sssccc
sssccc



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

  Selected: {{ selected }}