I've a array and I want put into a <md-select> component. On the offical documentation the list is made from static values.
I'm trying do it:
<md-select v-for="item in group" v-bind:key="item">
<md-option value="{{item.codigo}}"> {{item.nome}} </md-option>
</md-select>
export default {
data() {
return {
group: []
}
}
But it not compiles.
You are trying to iterate the <select> tag and that is incorrect, you should iterate the <option> tags, and u need to bind each option value without use {{ }}, just using v-bind or his shortcut : like this:
<md-select v-model="myOptionSelected">
<md-option
v-for="item in group" v-bind:key="item"
:value="item.codigo">
{{item.nome}}
</md-option>
</md-select>
export default {
data() {
return {
myOptionSelected: '',
group: []
}
}
v-bind:key and value?
v-bind:key or his shortcut :key is the key for each iteration, value is the value of the current option inside of select. Then when u choose some option his value is taken by the select on his v-model.value for each option.