Vue.js从API获取数据填充select下拉选项无显示问题求助

你遇到的渲染异常是以下两个常见书写错误导致的：

• v-for未添加唯一key属性：Vue的列表渲染要求v-for必须搭配唯一key属性作为节点标识，否则无法触发列表的响应式更新。
• value属性未动态绑定：你当前写的value="lote.value"是静态赋值，会把字符串lote.value直接传给选项，而非绑定lotes数组对应项的value值，需要改用v-bind语法（简写为:）。
• 额外排查点：如果你的products数组也是异步接口请求获取的，需要确保fillLotesArray方法在products请求成功的回调中执行，避免mounted钩子执行时products还未拿到接口返回数据。

修正后的模板代码 #

<md-select placeholder="Seleccione Lote" v-model="selectedLote" name="lotes" id="lotes">
  <md-option  
    v-for="(lote, index) of lotes" 
    :key="index" 
    :value="lote.value"
  >
    {{lote.text}}
  </md-option>
</md-select>

如果lote.value确定为唯一值，也可以直接用:key="lote.value"，性能优于索引作为key。

内容的提问来源于stack exchange，提问作者Juan Glez