（一）vue前端调用后端接口展示数据到下拉框

最新推荐文章于 2025-04-12 15:00:27 发布

big米

最新推荐文章于 2025-04-12 15:00:27 发布

阅读量498

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53905329/article/details/144430710

一、需求

定义一个下拉框，下拉框的数据是在接口中取

二、调用接口

import { listAnemometer } from "@/api/system/anemometer";

三、判断接口是否返回数据并查看

1、created（）中初始化自定义的调用接口的方法

created() {
    this.getAnemometer();
  },

2、取数据

1.在数据中定义一个集合接收后端传来的数据

data(){
  return{
    anemometerData: [],
  }
}

2.调用接口

methods: {  
  getAnemometer() {
      this.queryParams = {};//初始化传参
      listAnemometer(this.queryParams).then((response) => {//调用接口
        this.anemometerData = response.rows;//存储后端数据
      });
    },
}

3.在浏览器f12并刷新页面，点击网络查看调用的接口，可以看到是有数据的

3、定义下拉框

<el-select v-model="deviceId" clearable placeholder="请选择">
   <el-option
      v-for="item in anemometerData"
      :key="item.reserveFor"//数据中可以作为key的值
      :label="item.towerName"//想要展示的value值
      :value="item.reserveFor"
    ></el-option>
/el-select>