做质量看板时，有个需求是从接口获取一些项目数据，然后需要把这些数据塞到下拉框组件中
本篇记录下如何利用v-for遍历接口返回的数据
后端返回的数据格式如下
代码语言：javascript复制[{
'id': 1,
'name': '冲刺14',
'state': 'active'
}, {
'id': 2,
'name': '冲刺13',
'state': 'closed'
}, {
'id': 3,
'name': '冲刺12',
'state': 'closed'
}]我需要把name字段取出来，回显到下拉框中，效果如下
很明显，这里前端需要用v-for来处理这些数据
假如我用一个参数来接收后端返回的list，参数名为sprints
html代码如下
代码语言：javascript复制<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>
