Vue + element to dynamically display background data to options

need:

Implement dynamic display of option values ​​in the selector instead of hard-coded data. My role ID data is as follows:

Now we need to display these data requests on the option

The implementation is as follows:

Use the selector in element-ui:

<el-form-item label="Role ID:" prop="roleId">
    <el-select v-model="addUserForm.roleId" placeholder="Please select role ID">
      <el-option
          v-for="item in roleList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
</el-form-item>

Customize an empty array in data:

Write the request to implement data in methods:

getroleList() {
   getRoleList(this.name).then(res => {
     let result = res.data.items;
     console.log("Get role list: " +JSON.stringify(this.roleList));
     result.forEach(element => {
     	this.roleList.push({label:element.name,value:element.name});
     });
     }).catch( error => {
       console.log(error);
  });
},

In created implementation display:

Where getRoleList is the get request I encapsulated:

The results are as follows:

This is the end of this article about how to use Vue + element to dynamically display background data to options. For more relevant Vue element dynamic options content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!