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": "请求成功"
}

三、项目演示图