0

I am using Bootstrap Vue to render a select input. Everything is working great - I'm able to get the value and change the UI based on the option that was selected.

I am trying to change the headline text on my page - to be the text of the selected option. I am using an array of objects to render the options in my select input.

Here is what I'm using for my template:

<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>

Here is what my data/options look like that I'm passing to the template:

...
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
    },
},
...

I can get optionOne or optionTwo, what I'd like to get is Option One or Option Two (the text value) instead of the value value. Is there a way to do that without creating an additional array or something to map the selected option? I've also tried binding to the actual options object, but haven't had much luck yet that route either. Thank you for any suggestions!

Solution

Thanks to @Vuco, here's what I ended up with. Bootstrap Vue passes all of the select options in via :options. I was struggling to see how to access the complete object that was selected; not just the value.

Template:

<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: {
    //
}
...

Now, when I select something the text value shows on my template.

Damon
  • 4,151
  • 13
  • 52
  • 108
  • what's the issue? Also I'd recommend not using `arrow` functions in places you've used them. A function shorthand would keep things consistent. – painotpi Jan 02 '20 at 15:05
  • Hi @pai.not.pi, Noted - I'll update my code. I am trying to display `Option One` (the text of the selected option) in my template. Currently, I am only able to display `optionOne` which is the value that is selected. Example: `

    Option One

    `     – Damon Jan 02 '20 at 15:15

2 Answers2

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
  • 20,555
  • 10
  • 56
  • 107
  • Thank you @Vucko - I was working on a computed method. The part that was throwing me was I using `:options` to pass everything through. I was having trouble seeing how to access the full object. I've updated my question to show the solution I ended up with. – Damon Jan 02 '20 at 15:33
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
  • 306
  • 1
  • 7