vue学习：使用v-for向select组件绑定数据

做质量看板时，有个需求是从接口获取一些项目数据，然后需要把这些数据塞到下拉框组件中

本篇记录下如何利用v-for遍历接口返回的数据

 

后端返回的数据格式如下

[{
    'id': 1,
    'name': '冲刺14',
    'state': 'active'
}, {
    'id': 2,
    'name': '冲刺13',
    'state': 'closed'
}, {
    'id': 3,
    'name': '冲刺12',
    'state': 'closed'
}]

我需要把name字段取出来，回显到下拉框中，效果如下

 

很明显，这里前端需要用v-for来处理这些数据

假如我用一个参数来接收后端返回的list，参数名为sprints

 

html代码如下

<div style="float: left; padding-left: 20px">
        选择冲刺：
  <el-select v-model="sprint" placeholder="请选择冲刺" @change="get_sprint_data">
     <el-option v-for="(i, index) in sprints" :key="index" :label="i.name" v-bind:value="i.id"></el-option>
     <!-- 使用v-bind绑定遍历的值，:label为v-bind的语法糖 v-bind:label="i.name" -->
  </el-select>
</div>