Dostat dvě hodnoty z json do <b-formuláře-zvolte možnost> text-field

Question 1

Pracuji s BootstrapVue.

Mám json s následující strukturu:

[
    {"ID": "123", "Name": "Harry", "Age": "22"},
    {"ID": "456", "Name": "Harry", "Age": "18"},
    {"ID": "789", "Name": "Peter", "Age": "20"},
    {"ID": "159", "Name": "Peter", "Age": "19"},
]

Tak alespoň, jen aby bylo jasné, každý data - založeno od Name a Age spolu - je jedinečné, také bez ID (!). Je to jen příklad, aby bylo snazší pochopit.

To, co se snažím udělat, je nyní ukázat Name v <b-form-select> s Age v závorce za. Jako to např. pro: Petra (20).

V tuto chvíli mám následující kód:

<b-form-select :options="sortedPersons" text-field="Name" value-field="ID"></b-form-select>

Musím projít value na můj parent.vue ale chci ukázat text v tomto jeden. Takže jsem se rozhodla udělat to takhle.

Jediný, co teď potřebuju, je dostat následující. Tento příklad je ukázat, že prostě to, co chci:

:text-field="'Name' + ' ' + '(' + 'Age' + ')'", ale to nefunguje.

Jak mohu dělat to spustit?

Další Info - jsem json v computed předtím, než to řešit.

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

Díky předem!

Question 2

Budete buď muset mapujte svá data, takže text je formátován v jednom majetek, nebo místo drop pomocí options prop a namísto toho ručně vytvořit <option> kategorie použití 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>

Hiws · Answer 1 · 2021-11-23T09:07:13

Budete buď muset mapujte svá data, takže text je formátován v jednom majetek, nebo místo drop pomocí options prop a namísto toho ručně vytvořit <option> kategorie použití 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>

Jen pro doplňující Info pro všechny: Místo toho "jen" b-select jsem použít b-form-select a fungovalo to dobře, taky. Takže díky za pomoc!
<b-select> je jen alias <b-form-select>,, takže jsou stejné součásti. Je to jen můj zvyk používat alias, protože je to kratší :)

Dostat dvě hodnoty z json do <b-formuláře-zvolte možnost> text-field

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii