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

原创

冰霜

发布于 2022-04-11 19:56:46

86500

代码可运行

文章被收录于专栏：冰霜的软件测试技术分享冰霜的软件测试技术分享

运行总次数：0

代码可运行

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

本篇记录下如何利用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>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html