将 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="'Name' + ' ' + '(' + 'Age' + ')'"，但这行不通。

我怎样才能做到运行？

附加信息 - 我运行在 computed 中整理我的 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 属性放弃并手动创建 <option> 标签使用 v-for.

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"},
      ]
    };
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-4">
  <b-select v-model="selected">
    <option v-for="option in options" :key="option.ID" :value="option.ID">
      {{ option.Name }} ({{ option.Age }})
    </option>
  </b-select>

  Selected: {{ selected }}
</div>

将 json 的两个值放入 <b-form-select> 文本字段

get two values of json into <b-form-select> text-field

javascript

vue.js

vuejs2

bootstrap-vue