Vue-material: set selected in MdSelect

Created on 29 Nov 2016 · 3Comments · Source: vuematerial/vue-material

First of all thank you for your incredible project!

It's not clear to me how to set default value for the select list. How to make 'LIKE' a default value in the example below?

operators: {
equal: "=",
greater_than: ">",
greater_than_or_equal_to: ">=",
in: "IN",
less_than: "<",
less_than_or_equal_to: "<=",
like: "LIKE",
not_equal: "<>",
}

<md-select>
    <md-option v-for="operator in operators" :value="operator" >
        {{ operator }}
    </md-option>
</md-select>

Thank you!

question

Source

tridcatij

Most helpful comment

The correct code for this problem is:

<md-select v-model="myModel">
    <md-option v-for="(key, operator) in operators" :value="key">{{ operator }}</md-option>
</md-select>

{
  data: () => {
    return {
      myModel: 'like'
    };
  }
}

This is not a Vue Material behaviour, but a Vue.js way to repeat items.
Thanks.

marcosmoura on 29 Nov 2016

👍3

All 3 comments

The correct code for this problem is:

<md-select v-model="myModel">
    <md-option v-for="(key, operator) in operators" :value="key">{{ operator }}</md-option>
</md-select>

{
  data: () => {
    return {
      myModel: 'like'
    };
  }
}

This is not a Vue Material behaviour, but a Vue.js way to repeat items.
Thanks.

marcosmoura on 29 Nov 2016

👍3

I have used the following code:

<md-select name="province" id="province" :value="province" >
  <md-option v-for="province in provinces" :value="province.id" >{{province.name}}</md-option>
</md-select>

And similar code with basic components:

<select name="province" id="province" :value="province" >
  <option v-for="province in provinces" :value="province.id" >{{province.name}}</option>
</select>

The first one does not select the province value while the second does it.
province is in data and provinces come from an apollo query

demonodojo on 23 Feb 2017

@marcosmoura in the example you gave the v-for="(key, operator) in .. is flipped it should be v-for="(operator, key) in .. as per the docs. Kind of confusing that it's value:key and not key:value.