Tengo un campo b-form-select y emit mi value-field a mi padre, pero también necesito el text-field seleccionado.
Aquí está el código necesario para mostrar lo que quiero decir:
En mi plantilla:
<b-form-select v-model="selected" :options="getOptions" text-field="Name" value-field="Rank"></b-form-select>
pero si hago console.log(this.selected) , obtengo, por supuesto, el valor de Rank que he seleccionado. ¿Pero también es posible obtener el text-field ?
Aquí está mi script para mostrar cómo funciona mi selección:
computed: { getOptions() { const array = []; const person = this.data.find((i) => i.name === this.name); for (let key in person.persons) { array.push(person.persons[key]); } return array; }, }mis datos json:
[ { "name": "XXX", "persons": { "1": { "Name": "Max", "Rank": "1" }, "2": { "Name": "Peter", "Rank": "2" }, "3": { "Name": "Harry", "Rank": "1" }, "4": { "Name": "Jake", "Rank": "0" } } }, ]Como tiene el valor disponible, así como la lista de opciones, simplemente puede agregar un nuevo campo calculado para obtener los valores seleccionados text-field
computed: { getOptions() { const array = []; const person = this.data.find((i) => i.name === this.name); for (let key in person.persons) { array.push(person.persons[key]); } return array; }, selectedOption() { if (!this.selected) { return null; } return Object.values(this.getOptions).find((option) => { return option.Rank === this.selected; }); } } Luego acceda a selectedOption.Name o selectedOption.Rank . Si coloca el Name y el Rank en variables/atributos de datos, también puede hacerlo más genérico.
Actualizar:
Cambiado a Object.values