vue中@click.prevent函数的使用

一个困扰我很久的问题,后端使用django+DRF框架开发api,前端使用vue+axios+element plus写的登录功能,后端已经设置了允许跨域,使用postman请求接口正常,但是使用浏览器登录时,后端返回[25/Apr/2024 18:13:13,193] - Broken pipe from ('127.0.0.1', 62281)

定位问题思路:

跨域设置成功,应该不是跨域的问题

前端直接用js脚本发axios请求,可以成功返回

只有浏览器点击登录触发@click事件时,后端接口才会抛出这个错误,于是找了一些代码对比,发现我的表单代码中少了@click.preven函数。

复制代码
<template>
  <div class="container b-container" id="b-container">
    <form class="form" id="b-form" method="" action="" @click.prevent>
      <h2 class="form_title title">登录网页</h2>
      <div class="form__icons">
        <img class="form__icon" src=" " />
        <img class="form__icon" src=" " />
        <img class="form__icon" src=" " />
      </div>
      <span class="form__span">使用邮箱账号</span>
      <input
        class="form__input"
        type="text"
        placeholder="用户名"
        v-model="username"
      />
      <input
        class="form__input"
        type="password"
        placeholder="密码"
        v-model="password"
      />
      <a class="form__link">忘记密码?</a>
      <button class="form__button button submit" @click="submit">登 录</button>
    </form>
  </div>
</template>

问题出现在第三行代码,如果没有加@click.prevent,点击button时,type是submit,在浏览器获取返回之前,会拒绝接收返回的内容,所以后端出现broken pipe。

总结:

有些标签属性自带了事件,但我们有时并不需要那些事件,因此就需要阻止默认事件,只执行我们绑定的事件。@click.prevent就可以帮我们实现这个效果。

相关推荐
清灵xmf11 小时前
Vue + TSX 中使用 class 报错 解决方法
vue
专注前端30年1 天前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
专注前端30年1 天前
【Vue2】基础知识汇总与实战指南
开发语言·前端·vue
麦麦大数据2 天前
F039 python五种算法美食推荐可视化大数据系统vue+flask前后端分离架构
python·算法·vue·推荐算法·美食·五种算法
java水泥工3 天前
课程答疑系统|基于SpringBoot和Vue的课程答疑系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·大学生毕业设计·课程答疑系统
阿洛学长3 天前
高质量 AI 提示词之(从 0-1 开发 Vue 项目)
vue·ai编程·1024程序员节
IT教程资源D3 天前
[N_149]基于微信小程序网上商城系统
mysql·vue·前后端分离·springboot网上商城·网上商城小程序
ytgytg283 天前
芋道源码:VUE3部署:避坑--验证码不现显示,管理后台无法访问后端接口等,完善中。。。
java·vue
学会煎墙4 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
神膘护体小月半4 天前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue