BootstrapVue中b-form-select选中后如何在模板显示text-field对应值

实现方案 #

你可以通过计算属性根据选中的age值匹配到对应人员的name字段，不需要修改原有emit逻辑，改动量极小。

1. 修改模板代码

把原来展示name的位置替换为计算属性即可：

<b-form-select v-model="selected_Person" :options="persons" text-field="name" value-field="age"></b-form-select>
<div> {{ selectedPersonName }} </div>

2. 修改脚本代码，新增computed配置

data() {
  return {
    persons: [
      {"name": "Hagrid", "age": "81"},
      {"name": "Harry", "age": "18"},
      {"name": "Ron", "age": "19"},
      {"name": "Snape", "age": "48"}
    ],
    selected_Person: null,
  }
},
computed: {
  selectedPersonName() {
    // 无选中值时返回空或自定义提示
    if (!this.selected_Person) return ''
    // 匹配age对应的人员项返回name
    const target = this.persons.find(item => item.age === this.selected_Person)
    return target ? target.name : ''
  }
},
watch: {
  selected_Person() {
    this.$emit('selected_Person', this.selected_Person) 
  }
}

补充：如果不想新增计算属性，也可以给b-form-select绑定ref属性，通过$refs.selectRef.selected?.name直接获取选中项的name，不过该方式在组件未完成挂载时可能出现取值异常，优先推荐计算属性方案。

内容的提问来源于stack exchange，提问作者patrick96