I'm currently utilizing BootstrapVue.
In my b-form-select component, I display the name (as the text field) in the selection within my child.vue and emit the age (as the value field) to my parent.vue. This functionality is functioning as intended.
However, I am now looking to also display the name - the text-field - in my child.vue template. How can this be accomplished?
At present, I am using a watch method to detect changes when an item is selected, and emitting this value. Nevertheless, I also wish to validate my text-field and visually showcase it beneath my b-form-select component.
The template in 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>
The script in 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) //This emits the age as the value
}