javascript - 如何使用数组中的数据在 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>标签，并且您需要绑定(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: []
   }
}