我正在與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（！）。這只是一個例子，讓大家更容易理解。
我試著做，現在是顯示Name在一個<b-form-select>與Age在后面的括號。像這樣例如：彼得（20）。
目前我有以下代碼：
<b-form-select :options="sortedPersons" text-field="Name" value-field="ID"></b-form-select>
我需要傳遞value給我，parent.vue但想在這個中顯示文本。所以我決定這樣做。
我現在唯一需要的是獲得關注。這個例子是為了簡單地展示我想要的：
:text-field="'Name' ' ' '(' 'Age' ')'"，但這不起作用。
我怎樣才能讓它運行？
附加資訊-我跑我json在computed之前對它進行排序。
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;
});
},
提前致謝！
uj5u.com熱心網友回復：
您要么需要映射您的資料，以便您想要的文本在單個屬性中進行格式化，要么使用optionsprop洗掉并<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/[email protected]/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364155.html