javascript - 如何使用数组中的数据在 Vue JS Material 中制作 下拉菜单？

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>标签，并且你需要绑定(bind)每个选项值而不使用 {{ }} , 只需使用 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: []
   }
}