Estoy trabajando con BootstrapVue .
Tengo una b-form-select donde muestro mi name (= campo de texto) dentro de la selección en mi emit y emito mi age (= campo de valor) a mi parent.vue. Esto funciona bien.
Ahora también quiero show mi name , por lo que mi campo de texto en mi child.vue template : ¿cómo puedo lograrlo?
Por ahora, estoy usando el watch para detectar cambios cuando se selecciona algo y emit este value ... pero aquí también quiero verificar mi text-field e "imprimirlo" debajo de mi b-form-select .
Mi plantilla (child.vue)
<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select> <div> {{ Here I want to see the name of my Person }} </div>Mi guión (child.vue)
data() { return { persons: [ {"name": "Hagrid", "age": "81"}, {"name": "Harry", "age": "18"}, {"name": "Ron", "age": "19"}, {"name": "Snape", "age": "48"} ], selected_Person: null, } }, watch: { selected_Person() { this.$emit('selected_Person', this.selected_Person) //Here I emit my age, because it's my value }Método 1: intercambiar valores de campo text-field y value-field valor
<b-form-select v-model="selected_Person" :options="persons" text-field="age" value-field="name"></b-form-select> <div> {{ selected_Person }} </div>Método-2:
Puede usar la propiedad computed para esto como
<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select> <div> {{ getPersonName }} </div>y
data() { return { persons: [ {"name": "Hagrid", "age": "81"}, {"name": "Harry", "age": "18"}, {"name": "Ron", "age": "19"}, {"name": "Snape", "age": "48"} ] } }, computed: { getPersonName() { return this.persons.filter(person => person.age == this.selected_person)[0].name; // logic is applicable only when you set value-field to `age` // In case if there are multiple persons with the same age then use the below code // return this.persons.filter(person => person.age == this.selected_Person).map(per => per.name).join(','); } }, watch: { selected_Person() { this.$emit('selected_Person', this.selected_Person) //Here I emit my age, because it's my value }¿Cómo vinculas v-model a un observador? Creo que los observadores se utilizan para observar un valor particular en su propiedad data() . Debe definir una propiedad 'selected_Person' en sus datos () y observar ese valor y, en consecuencia, puede mostrarlo en la template de esta manera: -
data() { return { persons: [ {"name": "Hagrid", "age": "81"}, {"name": "Harry", "age": "18"}, {"name": "Ron", "age": "19"}, {"name": "Snape", "age": "48"} ], selected_Person: null } }, watch: { selected_Person() { this.$emit('selected_Person', this.selected_Person) //Here I emit my age, because it's my value }En la plantilla: -
<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select> <div> {{ selected_Person }} </div>