bootstrap-vue：如何显示选定项目的文本？

Question

我正在使用引导Vue来呈现一个选择输入。一切都很好--我可以根据所选的选项获取值并更改UI。

我正在尝试更改我的页面上的标题文本--成为所选选项的文本。我正在使用一个对象数组来呈现选择输入中的选项。

以下是我在模板中使用的内容：

<b-form-group
    id="mySelect"
    description="Make a choice."
    label="Choose an option"
    label-for="mySelect">
    <b-form-select id="mySelect"
        @change="handleChange($event)"
        v-model="form.option"
        :options="options"/>
</b-form-group>

下面是我传递给模板的数据/选项的样子：

...
data: () => ({
    form: {
        option: '',
    }
    options: [
        {text: 'Select', value: null},
        {
            text: 'Option One',
            value: 'optionOne',
            foo: {...}
        },
        {
            text: 'Option Two',
            value: 'optionTwo',
            foo: {...}
        },
}),
methods: {
    handleChange: (event) => {
        console.log('handleChange called');
        console.log('event: ', event);  // optionOne or optionTwo
    },
},
...

我可以获得optionOne或optionTwo，我希望获得的是optionOne或optionTwo（文本值），而不是value值。有没有一种方法可以做到这一点，而不创建一个额外的数组或其他东西来映射选定的选项？我也尝试过绑定到实际的options对象，但在这条路由上也不太走运。谢谢您的任何建议！

解决方案

感谢@Vuco，这是我最后得到的。引导Vue通过:options将所有select选项传入。我正在努力查看如何访问选定的完整对象；不仅仅是价值。

模板：

<h1>{{ selectedOption }}</h1>
<b-form-group
    id="mySelect"
    description="Make a choice."
    label="Choose an option"
    label-for="mySelect">
    <b-form-select id="mySelect"
        v-model="form.option"
        :options="options"/>
   </b-form-group>

JS：

...
computed: {
    selectedOption: function() {
        const report = this.options.find(option => option.value === this.form.option);
        return option.text;  // Option One
},
methods: {
    //
}
...

现在，当我选择一些东西时，文本值会显示在我的模板上。

Answer 1

我不知道Vue bootstrapselect及其事件和逻辑，但您可以创建一个简单的computed属性，该属性通过当前的表单返回信息。option值：

null

let app = new Vue({
  el: "#app",
  data: {
    form: {
      option: null,
    },
    options: [{
        text: 'Select',
        value: null
      },
      {
        text: 'Option One',
        value: 'optionOne'
      },
      {
        text: 'Option Two',
        value: 'optionTwo'
      }
    ]
  },
  computed: {
    currentValue() {
      return this.options.find(option => option.value === this.form.option)
    }
  }
});

<div id="app">

  <b-form-group id="mySelect" description="Make a choice." label="Choose an option" label-for="mySelect">
    <b-form-select id="mySelect" v-model="form.option" :options="options" />
  </b-form-group>

  <p>{{ currentValue.text }}</p>
</div>