Setting default selected value in select dropdown Vue.Js

Question

I have a problem getting the default selected value using select in VueJs. I have tried in two instances:

Passing id and v-model fields in the select as:

<select v-model="sort_brand" id="sort-brand" class="form-control">
  <option value="all" selected="selected">All(Brands)</option>
  <option v-for="brand in brands" :value="brand.id">{{ brand.name }}</option>
</select>

The selected default value is empty in this case.

Passing sort_brand without id to select:

<select id="brand-id" class="form-control">
  <option value="all" selected="selected">All(Brands)</option>
  <option v-for="brand in brands" :value="brand.id">
    {{ brand.name }}
  </option>
</select>

The default selected value is populated but then i don't have the form binding for VueJs. Anyone please assist with this:

jsfiddle.net/MaraBlack/oqkaq6ad As far as i understand, you need the default selection, set it on data: {} and then you can acces it everywhere this.selected in js or selected in html. — Mara Black
– Mara Black, Commented May 15, 2018 at 11:26

Lunfel · Accepted Answer · 2018-05-14 14:45:06Z

2

Vue.js will manipulate the selected attribute based on the v-model of the select and the option value. Thus trying to set the selected attribute will not work.

For your "All" option, you could assign the null value like this:

<option :value="null">All(Brands)</option>

And then set your sort_brand variable to null. Then vue.js will match the null sort_brand to the option with the null value.

Note: I used null here because that's the way I usualy do it, but I could use any other value. You could use the 'all' string also.

answered May 14, 2018 at 14:45

Lunfel

2,71723 silver badges29 bronze badges

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

2 Comments

TechPotter Over a year ago

Thank you @Lunfel for the logic , i had set the sort_brand to empty string, I changed it to 'all' and it now works fine

Steve Over a year ago

Empty string should work but you also have e to explicitly set the value as empty string on your option <option value='' >all brands</option>

Himanshu Mittal · Accepted Answer · 2018-05-15 08:24:51Z

0

Update sort_brand to all in created hook which will set the option will value 'all' as default:

created (){
 this.sort_brand = 'all';
}

You can also initialize the model in data itself.

data (){
 return {
  sort_brand : 'all'
 }
}

answered May 15, 2018 at 8:24

Himanshu Mittal

8047 silver badges19 bronze badges

Comments

EJSawyer · Accepted Answer · 2019-01-10 23:02:18Z

The answers above (e.g. @Lunfel) work if your selection values are simple (null, "All", etc). If your combo is bound to complex JSON objects, then it's very difficult to set the bound variable and let it auto-select.

I found it much easier to find the option I wanted, based on the display text, in the mounted function() using JQuery, and then set the 'selected' attribute. How you do this depends on your version of JQuery. In recent versions (not sure when it changed, I'm running 1.10.2), you can use something like:

$("#sort-brand option").filter(function () {
    return $(this).prop("label") == 'All';
}).prop("selected", true);

Older versions of JQuery don't have the prop() function, but had a somewhat better selector for the find() function. Try:

$('#sort-brand').find('option[text="All"]').attr('selected', 'selected');

See How to select an option by its text? for more discussion on selecting dropdown options with jQuery.

Collectives™ on Stack Overflow

Setting default selected value in select dropdown Vue.Js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related