Vue3/Vite下拉框数据动态绑定从数据库中（接口中）传出的数据

本篇以vue3的语法举行编写

一、下拉框的部分代码

1. <el-form-item label="选择上级名称">
2.           <el-select
3.             v-model="data.form.fid"
4.             placeholder="请选择上级名称"
5.             style="width: 100%;">
6.             <el-option
7.                 v-for="item in firstData"
8.                 :key="item.id"
9.                 :label="item.name"
10.                 :value="item.id"></el-option>
11.           </el-select>
12. </el-form-item>

复制代码

二、<script setup>中的部分代码

   

• 首先利用ref函数创建一个相应式的数据变量firstData，用于存储下拉框的选项
  
• 利用onMounted钩子函数，在组件挂载时发送HTTP哀求获取数据。
  
• 利用axios发送了一个GET哀求到你自己的项目接口，获取下拉框的选项数据。
  
• 获取到数据后，将其赋值给firstData变量。
  
• 在模板中利用v-for指令遍历firstData数组，为下拉框天生选项。
  

  记得将https://api.example.com/options替换为你现实的接口地点，并根据现实情况调整代码。

1. <script setup>
2. import {reactive,ref,onMounted} from "vue";
3. import axios from 'axios';
6. const data = reactive({
7.     form:{},
8.     fid:''
9. })
10. const firstData =ref([])
12. onMounted(async () =>{
13.   try {
14.     const response = await axios.get('你自己的接口地址');
15.     firstData.value = response.data.data;
16.   }catch (error){
17.     console.error(
18.         '错误',error
19.     )
20.   }
21. })
22. </script>

复制代码

至于这句

1. firstData.value = response.data.data;

复制代码

 为什么接收的是data.data，是由于我接口传出的参数是下面的这个情势

1. {
2.     "code": 2000,
3.     "data": [
4.         {
5.             "id": 1,
6.             "name": "安全文化展示",
7.             "descr": "安全文化展示简介"
8.         },
9.         {
10.             "id": 2,
11.             "name": "施工安全作业体验",
12.             "descr": "施工安全作业体验简介"
13.         },
14.         {
15.             "id": 3,
16.             "name": "安全警示教育",
17.             "descr": "安全警示教育简介"
18.         },
19.         {
20.             "id": 4,
21.             "name": "事故警示体验",
22.             "descr": "事故警示体验简介"
23.         },
24.         {
25.             "id": 5,
26.             "name": "总结培训评价",
27.             "descr": "总结培训评价简介"
28.         },
29.         {
30.             "id": 6,
31.             "name": "测试数据",
32.             "descr": "测试数据"
33.         }
34.     ],
35.     "msg": "请求成功"
36. }

复制代码

三、项目演示图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。