[Vuejs]-Bootstrap-vue: how can I display the text of a selected item?

by

2👍

✅

I don’t know Vue bootstrap select and its events and logic, but you can create a simple computed property that returns the info by the current form.option value :

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>

Here’s a working fiddle.

👤Vucko

1👍

You have an error in your dictionary.
Text is showed as an option.
Value is what receive your variable when option is selected.

Is unneccesary to use computed property in this case.

let app = new Vue({
  el: "#app",
  data: {
    form: {
      option: null,
    },
    options: [{
        value: null,
        text: 'Select'
      },
      {
        value: 'Option One',
        text: 'Option One'

      },
      {
        value: 'Option Two',
        text: 'Option Two'
      }
    ]
  }
});

Fiddle with corrections

Documentation

👤NBlack

Leave a comment