Vue.js - Select / dropdown selected item vm binding is not working (bootstrap-vue)

Question

I'm trying to create a simple vue that binds the selected item from a select/dropdown to a property in the vm.

I haven't been able to find a clear and simple example of how this is down when using an options collection that is also in the view model.

<template>
    <div>
        <h1>Select box</h1>
        <b-dropdown id="ddCommodity"
                    name="ddCommodity"
                    v-model="ddTestVm.ddTestSelectedOption"
                    text="Select Item"
                    variant="primary"
                    class="m-md-2" v-on:change="changeItem">
            <b-dropdown-item disabled value="0">Select an Item</b-dropdown-item>
            <b-dropdown-item v-for="option in ddTestVm.options":selected="option.value == 'LME/ST_TNI_ALL'":value="option.value">{{option.text}}</b-dropdown-item>           
        </b-dropdown> <span>Selected: {{ ddTestVm.ddTestSelectedOption }}</span>
 </div>
</template>


<script>
    export default {
        components: {

        },
        data() {
            return {
                someOtherProperty: null,
                ddTestVm: {
                    originalValue: [],
                    ddTestSelectedOption: "Value1",
                    disabled: false,
                    readonly: false,
                    visible: true,
                    color: "",
                    options: [
                        {
                            "value": "Value1",
                            "text": "Value1Text"
                        },
                        {
                            "value": "Value2",
                            "text": "Value2Text"
                        },
                        {
                            "value": "Value3",
                            "text": "Value3Text"
                        }
                    ]
                }
            }
        },        
        methods: {
            changeItem: async function () {
            //grab some remote data
                try {
                    let response = await this.$http.get('https://www.example.com/api/' + this.ddTestVm.ddTestSelectedOption + '.json');
                    console.log(response.data);
                    this.someOtherProperty = response.data;
                } catch (error) {
                    console.log(error)
                }
            }
        },
        watch: {

        },
        async created() {

        }
    }
</script>

<style>
</style>

Regardless of what i've tried i cannot get the selected value in the dropdown to change the ddTestSelectedOption property of the vm.

Could anyone assist on this issue?

Thanks.

Marvin · Accepted Answer · 2022-08-06 22:01:24Z

36

b-dropdown in bootstrap-vue does not support v-model. As the documentation states:

Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.

In other words, b-dropdown is essentially a UI component for displaying a menu or similar set of options.

I expect what you want is b-form-select.

That said, you could add a click handler to the options that sets the value.

  <b-dropdown-item v-for="option in ddTestVm.options" 
                    :key="option.value" 
                    :value="option.value"
                    @click="ddTestVm.ddTestSelectedOption = option.value">

Here is a working example.

edited Aug 6, 2022 at 22:01

Marvin

9412 gold badges18 silver badges44 bronze badges

answered Nov 5, 2017 at 18:46

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

billy jean Over a year ago

well that's embarrassing :) Thanks!

billy jean Over a year ago

Any ideas why :on-change="changeItem" would not be working? The event never seems to fire.

Bert Over a year ago

@billyjean For what component? Neither b-form-select or b-dropdown emit an on-change event or accept an on-change property.

Jerry Chong · Accepted Answer · 2020-07-09 04:23:42Z

2

Only b-form-select can achieve the selected value behaviour.

Non-Selected Value Preview:

Selected Value Preview:

Sample Code:

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 1, text: 'Please select an option' },
          { value: 2, text: 'This is First option' },
          { value: 3, text: 'Selected Option' }
        ]
      }
    }
  }
</script>

edited Jul 9, 2020 at 4:23

answered Jun 5, 2020 at 12:55

Jerry Chong

9,4504 gold badges54 silver badges44 bronze badges

Comments

Farshid · Accepted Answer · 2019-09-21 15:38:40Z

I thing you need b-form-select

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

Der Zinger · Accepted Answer · 2022-08-18 09:00:54Z

0

Wanted to leave a comment, but code example looks pale there :)

Yes, b-dropdown does not properly support Vue model, but it doesn't have to.

For those still interested in exactly dropdown (f.e. because it looks fancier), consider:

    <b-dropdown :text="$i18n.locale" >
      <b-dropdown-item v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang" v-on:click="$i18n.locale = lang;" >{{lang}}</b-dropdown-item>
    </b-dropdown>

Slecifically v-on:click, which can handle the model value change for you.

answered Aug 18, 2022 at 9:00

Der Zinger

5558 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vue.js - Select / dropdown selected item vm binding is not working (bootstrap-vue)

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related