vue实现获取后端返回字典不同id的数据展示在el-select中,请给出具体的vue代码
时间: 2024-02-13 09:03:26 浏览: 85
好的,下面是一个示例代码,其中假设后端返回一个字典数组,每个字典包含id和name两个键值对:
```
<template>
<div>
<el-select v-model="selected" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [], // 用来存储后端返回的字典数组
selected: '' // 用来存储选中的id
};
},
mounted() {
// 发送请求获取后端返回的字典数组
axios.get('/api/dictionary/')
.then(response => {
this.options = response.data;
})
.catch(error => {
console.log(error);
});
}
};
</script>
```
在上述代码中,我们使用了Element UI的`el-select`和`el-option`组件来展示后端返回的字典数组。在`mounted`生命周期中,我们发送了一个GET请求来获取后端返回的字典数组,并将其存储在`options`数组中。在`el-option`中,我们将每个字典的`id`作为选项的`value`,将每个字典的`name`作为选项的`label`。当用户选择一个选项时,`selected`变量将被更新为该选项的`id`。
阅读全文