Ax ios запрос в методе Vue. js, работающий при запуске из "mount ()", но не при запуске из html <form>

Question

Когда я аутентифицируюсь на Laravel Паспорт бэкэнд с Nuxt. js, как показано ниже, это работает, и я получаю токен:

mounted() {
  this.axiosGetToken()
}

Но, если я запускаю метод с button в form, например:

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

Затем я получаю статус (canceled) для Laravel страница на вкладке Сеть инструмента разработчика моего браузера.

Метод выглядит следующим образом:

axiosGetToken() {
  const url = 'http://laravel.test/oauth/token'
  const params = {
    client_id: 2,
    client_secret: 'S0gpcgfIDgbvIHCL3jIhSICAiTsTUMOR0k5mdaCi',
    grant_type: 'password',
    username: 'me@home.com',
    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 пытается перезагрузить страницу и выполнить поиск действия из серверной части, чтобы запустить ее, поэтому * Модификатор 1006 * предотвратит действие и позволит запустить обработчик события js.

Answer 2

Как упомянуто выше, если вы используете форму с кнопкой type = "submit", при нажатии этой кнопки она будет использовать поведение клиента по умолчанию и отправит запрос на URL-адрес действия формы, добавление предотвращения остановит это. поведение.

Хотя это правильный ответ, я бы предложил добавить на кнопку @ click = "axiosGetToken ()".

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