BootstrapVue的b-form-select如何同时获取选中项的value-field和text-field

解决方案 #

这里提供两种可行实现方式，按需选择即可：

方法1：通过选中的Rank值反向查找对应文本 #

你的getOptions已经是包含所有选项完整字段的数组，直接用选中的Rank去匹配即可：

1. 模板无需额外修改，保持原有配置即可：

<b-form-select v-model="selected" :options="getOptions" text-field="Name" value-field="Rank"></b-form-select>

2. 新增计算属性获取当前选中的完整对象：

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;
  },
  // 新增：当前选中的完整选项对象
  selectedItem() {
    return this.getOptions.find(item => item.Rank === this.selected) || {}
  }
}

后续需要获取文本时直接取this.selectedItem.Name即可，需要传递给父组件的Rank值仍然可以用原有this.selected。

注意：你当前的数据源里存在两个Rank为1的项（Max和Harry），如果Rank允许重复，该方法会匹配到第一个出现的对应项，若需要避免匹配错误建议用方法2，或者将value-field配置为唯一值字段。

方法2：修改绑定逻辑直接获取完整对象，单独处理传给父组件的Rank值 #

如果不想每次查找匹配，也可以去掉value-field配置，让v-model直接绑定整个选中对象：

1. 模板修改：

<b-form-select v-model="selectedItem" :options="getOptions" text-field="Name"></b-form-select>

2. 逻辑部分调整：

// 此时this.selectedItem就是完整的{Name:xxx, Rank:xxx}对象
// 需要传Rank给父组件时，直接取this.selectedItem.Rank即可
// 如果需要在选中变化时自动emit给父组件，可以加监听：
watch: {
  selectedItem(newVal) {
    if(newVal) {
      this.$emit('你的自定义事件名', newVal.Rank)
    }
  }
}

需要文本时直接取this.selectedItem.Name即可，该方式更直观，不会因为value重复出现匹配错误的问题。

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