vue中@click.prevent函数的使用

杜杜的man2024-04-27 9:18

一个困扰我很久的问题，后端使用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就可以帮我们实现这个效果。