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>