Vue 中的 Axios 请求.js方法在从"mounted()"启动时有效，但在从 html <form>启动时不起作用

Question

当我像下面这样使用Nuxt.js向Laravel Passport后端进行身份验证时，它会工作，我会得到一个令牌：

mounted() {
this.axiosGetToken()
}

但是，如果我在form中使用button运行该方法，如下所示：

<form @submit="axiosGetToken()">
<button type="submit">Axios login</button>
</form>

然后，我在浏览器开发人员工具的Network选项卡中获得Laravel页面的状态(canceled)。

方法如下：

axiosGetToken() {
const url = 'http://laravel.test/oauth/token'
const params = {
client_id: 2,
client_secret: 'S0gpcgfIDgbvIHCL3jIhSICAiTsTUMOR0k5mdaCi',
grant_type: 'password',
username: '[e-mail]',
password: '1qaz@WSX'
}
const headers = {
}
this.$axios
.post(url, params, headers)
.then(response => {
// eslint-disable-next-line
console.log(response)
})
.catch(response => {
// eslint-disable-next-line
console.log(response)
})
},

这个表格怎么了？

Answer 1

您应该添加prevent修饰符：

<form @submit.prevent="axiosGetToken()">
<button type="submit">Axios login</button>
</form>

默认情况下，submit事件尝试重新加载页面，并从后端搜索操作以运行它，因此prevent修饰符将阻止该操作并允许运行js事件处理程序。

Answer 2

如上所述，如果您使用带有类型="submit"按钮的表单，当按下该按钮时，它将使用默认的客户端行为，并向表单操作URL发送请求，添加阻止将停止该行为。

虽然这是一个有效的答案，但我建议在按钮上添加@click="axiosGetToken(("。

<form>
<button type="button" @click="axiosGetToken()">Axios login</button>
</form>