How to set default value in bootstrap-select dropdown with Vue.js

Question

Here is the dropdown HTML

<div class="form-group">
    <select class="form-control" id="edit-item_condition">
       <option data-tokens="1">Option 1</option>
       <option data-tokens="2">Option 2</option>
       <option data-tokens="3">Option 3</option>
       <option data-tokens="4">Option 4</option>
       <option data-tokens="5">Option 5</option>
    </select>
</div>

I'm trying to set default value that I fetch from DB

 const editItem = new Vue({
            el: "#editItem",
            data: {
                items: null,
                selectedItem: null,
            },
            methods: {
                set_dropdown_default(item) {
                    try {
                        this.selectedItem = item;
                        $('.edit-item_condition').selectpicker('val', parseInt(this.selectedItem.properties.condition));
                    }
                    catch (err) {
                        console.log(err);
                    }
                },

The this.selectedItem.properties.condition in my example is "2". Checked and proved in debugger. Nevertheless, the dropdown is not affected and shows "Option 1".

tony19 · Accepted Answer · 2022-07-15 21:35:02Z

4

You can bind the select tag via v-model with the needed option value, here is an example:

new Vue({
    el:"#app",
  data:{
    selected: 4
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <select v-model="selected">
    <option value="1">Frist</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
    
  </select>
  
  
  <p>Selected item: {{selected}}</p>
</div>

so in your example you could do

<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">

Reference

edited Jul 15, 2022 at 21:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 9, 2018 at 8:27

Mohd_PH

1,67713 silver badges19 bronze badges

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

1 Comment

IgorM Over a year ago

In my case, it was a bit more complicated, since I get item object from the previous modal, so I still have to set it dynamically on submit and accordingly in the method. Anyway, your answer is absolutely correct. Thank you.

Collectives™ on Stack Overflow

How to set default value in bootstrap-select dropdown with Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related