el-select get data list for backend api

element-ui框架,从后台api获取数据,生成select框选项. 这本来是很简单的一段代码, 但是官方文档没有相应示例, 而百度搜到的好几篇文章竟然都是错误的写法, 费了一番功夫, 才把效果实现出来. 

最终代码大致如下:

    <el-form
      :model="TeacherAddForm"
      :rules="rules"
      ref="TeacherAddForm"
      label-width="100px"
      class="demo-TeacherAddForm"
    >
      <el-form-item label="账号" required>
        <el-select v-model="TeacherAddForm.user_id">
          <el-option
            v-for="item in accountList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

...

 data() {
    return {
      accountList: [],
      TeacherAddForm: {
        user_id: "",
        bank_account: ""
      }
    }
  },
  created() {
    http.get("/accounts/list?type=1").then(res => {
      res.datas.forEach(i => {
        this.accountList.push(i);
      });
    });
  },