Блог

Я работаю с 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 в а lt;b-form-selectgt; с Age заключенными в скобки позади. Вот так, например: Питер (20).

На данный момент у меня есть следующий код:

 lt;b-form-select :options="sortedPersons" text-field="Name" value-field="ID"gt;lt;/b-form-selectgt;  

Мне нужно перейти value к своему parent.vue , но я хочу показать текст в этом. Поэтому я решил сделать это вот так.

Единственное, что мне сейчас нужно, — это начать следовать. Этот пример предназначен для того, чтобы просто показать, чего я хочу:

:text-field="'Name' ' ' '(' 'Age' ')'" , но это не работает.

Как я могу заставить его работать?

Дополнительная информация — Я запускаю свой json computed вход, прежде чем сортировать его.

 sortedPersons() {  var array = this.json.map((input) =gt; input);  return array.sort((a, b) =gt; {  if (a lt; b) return -1;  if (a gt; b) return 1;  return 0;  }); },  

Заранее спасибо!

Вам нужно будет либо сопоставить свои данные, чтобы нужный текст был отформатирован в одном свойстве, либо вместо этого отказаться от использования options реквизита и вместо этого вручную создать lt;optiongt; теги с помощью a 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"},  ]  };  } }); 

 lt;link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" /gt; lt;script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"gt;lt;/scriptgt; lt;script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"gt;lt;/scriptgt;   lt;div id="app" class="p-4"gt;  lt;b-select v-model="selected"gt;  lt;option v-for="option in options" :key="option.ID" :value="option.ID"gt;  {{ option.Name }} ({{ option.Age }})  lt;/optiongt;  lt;/b-selectgt;   Selected: {{ selected }} lt;/divgt;