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代码如下

"float: left; padding-left: 20px"> 选择冲刺: select v-model="sprint" placeholder="请选择冲刺" @change="get_sprint_data"> for="(i, index) in sprints" :key="index" :label="i.name" v-bind:value="i.id"> select>

相关