获取声明的文本字段/ BootstrapVue 的选定“值”

Question

我有一个b-form-select 字段和emit 我的value-field 给我的父母，但我也需要选定的text-field..

这是显示我的意思所需的代码：

在我的模板中：

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

但是如果我console.log(this.selected)，我当然会得到我选择的值Rank。但是也可以得到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;
  },
}

我的 json 数据：

[
    {
        "name": "XXX",
        "persons": {
            "1": {
                "Name": "Max",
                "Rank": "1"
                },
            "2": {
                "Name": "Peter",
                "Rank": "2"
            },
            "3": {
                "Name": "Harry",
                "Rank": "1"
            },
            "4": {
                "Name": "Jake",
                "Rank": "0"
            }

        }
    },
]

Answer 1

由于您有可用的值以及选项列表，您可以简单地添加一个新的计算字段来获取选定的值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;
    });
  }
}

然后访问selectedOption.Name 或selectedOption.Rank。如果将Name 和Rank 也放入变量/数据属性中，还可以使其更通用。

更新：

更改为 Object.values