2

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

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

  1. 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:

TechPotter
  • 579
  • 8
  • 14
  • https://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 May 15 '18 at 11:26

3 Answers3

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.

Lunfel
  • 2,499
  • 21
  • 29
  • 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 – TechPotter May 14 '18 at 14:59
  • 1
    Empty string should work but you also have e to explicitly set the value as empty string on your option – Steve May 15 '18 at 16:27
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'
 }
}
Himanshu Mittal
  • 794
  • 6
  • 19
0

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.

EJSawyer
  • 23
  • 6