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

【问题标题】：How to make a <md-select> drop down on VueJS Material using data from array?如何使用数组中的数据在 Vue JS Material 中制作 <md-select> 下拉菜单？
【发布时间】：2019-12-31 04:01:39
【问题描述】：

我有一个数组，我想放入一个<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: []
   }
}

但它无法编译。

【问题讨论】：

检查此stackoverflow.com/questions/32651715/…。我想它会解决你的问题。

标签： javascript vue.js vue-material

【解决方案1】：

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

<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和value有什么区别？
v-bind:key 或他的快捷方式:key 是每次迭代的键，value 是select 内部的当前option 的值。然后，当您选择某个选项时，他的值将被他的v-model 上的select 采用。
我更新了我的答案，为每个选项绑定value。