如何使用数组中的数据在 VueJS Material 上制作 <md-select> 下拉菜单？

Question

我有一个数组，我想放入一个 <md-select> 组件中。在 offical documentation 上，列表由静态值组成。

我正在尝试这样做：

<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: []
   }
}

但它无法编译。

Answer 1

您正在尝试迭代 <select> 标签，这是不正确的，您应该迭代 <option> 标签，并且您需要在不使用 {{ }} 的情况下绑定每个选项值，只是像这样使用 v-bind 或他的快捷方式 :：

<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: []
   }
}

如何使用数组中的数据在 VueJS Material 上制作 <md-select> 下拉菜单？

How to make a <md-select> drop down on VueJS Material using data from array?

javascript

vue.js

vue-material