Vue3/Vite下拉框数据动态绑定从数据库中（接口中）传出的数据
本篇以vue3的语法举行编写一、下拉框的部分代码
<el-form-item label="选择上级名称">
<el-select
v-model="data.form.fid"
placeholder="请选择上级名称"
style="width: 100%;">
<el-option
v-for="item in firstData"
:key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item> 二、<script setup>中的部分代码
[*]首先利用ref函数创建一个相应式的数据变量firstData，用于存储下拉框的选项
[*]利用onMounted钩子函数，在组件挂载时发送HTTP哀求获取数据。
[*]利用axios发送了一个GET哀求到你自己的项目接口，获取下拉框的选项数据。
[*]获取到数据后，将其赋值给firstData变量。
[*]在模板中利用v-for指令遍历firstData数组，为下拉框天生选项。
记得将https://api.example.com/options替换为你现实的接口地点，并根据现实情况调整代码。
<script setup>
import {reactive,ref,onMounted} from "vue";
import axios from 'axios';
const data = reactive({
form:{},
fid:''
})
const firstData =ref([])
onMounted(async () =>{
try {
const response = await axios.get('你自己的接口地址');
firstData.value = response.data.data;
}catch (error){
console.error(
'错误',error
)
}
})
</script> 至于这句
firstData.value = response.data.data; 为什么接收的是data.data，是由于我接口传出的参数是下面的这个情势
{
"code": 2000,
"data": [
{
"id": 1,
"name": "安全文化展示",
"descr": "安全文化展示简介"
},
{
"id": 2,
"name": "施工安全作业体验",
"descr": "施工安全作业体验简介"
},
{
"id": 3,
"name": "安全警示教育",
"descr": "安全警示教育简介"
},
{
"id": 4,
"name": "事故警示体验",
"descr": "事故警示体验简介"
},
{
"id": 5,
"name": "总结培训评价",
"descr": "总结培训评价简介"
},
{
"id": 6,
"name": "测试数据",
"descr": "测试数据"
}
],
"msg": "请求成功"
} 三、项目演示图
https://img-blog.csdnimg.cn/direct/31ec8a50cc6849fdbc13173533bdfe32.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]