將 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 }}