vue3 中el-button的按下事件发送GET请求

在 Vue3 中，你可以使用 `@click` 指令来监听按钮的点击事件，并且可以使用 `axios` 库来发送 GET 请求。首先，你需要安装 axios：

npm install axios

然后，在组件中引入 axios 并在点击事件中使用它发送 GET 请求：

<template>
  <el-button @click="getData">发送请求</el-button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    getData() {
      axios.get('/api/data').then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

其中 `/api/data` 是你要请求的数据接口路径。你可以根据实际情况修改它。

相关问题

vue中el-button获取验证码

在Vue.js中，如果需要在`el-button`组件上添加获取验证码的功能，通常会涉及到前端与后端交互，例如通过axios等HTTP库发起AJAX请求。你可以按照以下步骤操作：

1. 定义一个按钮并绑定点击事件：

<el-button @click="getVerificationCode" :loading="isLoading">获取验证码</el-button>

这里，`@click`表示当用户点击按钮时触发`getVerificationCode`函数，`:loading`用于显示加载状态。

2. 创建`getVerificationCode`方法：

data() {
  return {
    isLoading: false,
    verificationCode: '',
  };
},
methods: {
  getVerificationCode() {
    this.isLoading = true; // 开始加载状态
    axios.post('/api/get-verification-code', {}) // 替换为实际的API地址
      .then(response => {
        this.verificationCode = response.data.code; // 存储验证码
        this.isLoading = false; // 结束加载状态
      })
      .catch(error => {
        console.error('获取验证码失败:', error);
        this.isLoading = false;
      });
  },
}

在这个方法里，向服务器发送POST请求，并在响应成功时获取验证码值。注意替换`'/api/get-verification-code'`为你的实际API路径。

<el-card> <el-row :gutter="10"> <el-col :span="10"> <el-input v-model="queryInfo.name" placeholder="请输入要查的病人姓名" clearable @clear="getData"> <el-button slot="append" icon="el-icon-search" @click="getData"></el-button> </el-input> </el-col> <el-col :span="14"> <el-button type="warning" icon="el-icon-delete" plain @click="batchdel()">批量删除</el-button> </el-col> </el-row>

这是一段使用了Element UI组件库的Vue.js代码，其中包含一个名为el-card的卡片组件，el-row和el-col是用来布局的栅格组件，:gutter="10"表示每个栅格之间的间距为10像素。在el-col中包含了一个el-input组件，用来输入病人姓名，同时有一个清空按钮和一个搜索按钮，@clear="getData"表示在清空输入框时调用getData函数，@click="getData"表示在点击搜索按钮时调用getData函数。另外，在el-row中还包含了一个用于批量删除的el-button组件，图标是el-icon-delete，颜色为警告色，@click="batchdel()"表示在点击按钮时调用batchdel函数。