Vue.js方法中的Axios请求从“ mount（（））”启动时有效，但从html启动时不起作用）> ] >> 当我使用Nuxt.js 验证到Laravel Passport后端时，如下所示，它可以正常工作，并且我得到令牌： mounted() { this.axiosGetToken() } 但是，如果我在button中使用form运行该方法，则这样： <form @submit="axiosGetToken()"> <button type="submit">Axios login</button> </form> 然后，在浏览器开发人员工具的网络选项卡中，获得Laravel页面的状态(canceled)。该方法如下所示： axiosGetToken() { const url = 'http://laravel.test/oauth/token' const params = { client_id: 2, client_secret: 'S0gpcgfIDgbvIHCL3jIhSICAiTsTUMOR0k5mdaCi', grant_type: 'password', username: '[email protected]', 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) }) }, 此表格有什么问题？ [当我使用如下所示的Nuxt.js对Laravel Passport后端进行身份验证时，它可以正常工作，并且我获得了令牌：：... 您应该添加prevent修饰符： <form @submit.prevent="axiosGetToken()"> <button type="submit">Axios login</button> </form> [默认情况下，submit事件尝试重新加载页面并从后端搜索操作以使其运行，因此prevent修饰符将阻止该操作并允许运行js事件处理程序。] > 如上所述，如果您使用带有类型为“ submit”的按钮的表单，则在按下该按钮时，它将使用默认的客户端行为并将请求发送到表单操作URL，添加阻止将停止该行为。尽管这是一个有效的答案，但我建议在按钮上添加一个@ click =“ axiosGetToken（）”。 <form> <button type="button" @click="axiosGetToken()">Axios login</button> </form>

Question

当我使用Nuxt.js

验证到Laravel Passport后端时，如下所示，它可以正常工作，并且我得到令牌：

Answer 1

3
投票

您应该添加prevent修饰符：

Answer 2

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

尽管这是一个有效的答案，但我建议在按钮上添加一个@ click =“ axiosGetToken（）”。

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