Nuxt. js страница перезагружается для отправки даже с stop.prevent - PullRequest
Новая
       15

Nuxt. js страница перезагружается для отправки даже с stop.prevent

0 голосов
/ 20 апреля 2020

Я читал некоторые вопросы об этой же топике c, но ни один из них, похоже, не работает для меня, и я не могу определить ошибку.

У меня есть эта форма: 

<template>
  <div class="container">
    <form @submit.stop.prevent="submit">
      <input v-model="name" type="text" />
      <input v-model="email" type="text" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

И следующий скрипт 

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    async submit() {
      const res = await this.$axios.request({
        url: 'locahost:3000/404', // This route doesn't exists
        method: 'post',
        data: this.$data
      })

      console.log(res.status)
    }
  }
}
</script>

Как видите, в форме имеется более одного ввода, и я использую stop.prevent при привязке события отправки в form.

Я хочу обработать любые возможные ошибки в запросе ax ios в части скрипта и обновить страницу на основе этого (показывая ошибку div или что-то еще), но без перезагрузки. Однако страница перезагружается и переходит на страницу с ошибкой 404.

Я использую Nuxt 2.12.2 и не вижу, что я делаю неправильно. Любая помощь будет оценена.

Спасибо всем!

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Хорошо, я нашел ответ методом проб и ошибок, и это было проще, чем я думал ... Это было только из-за необоснованного отказа от обещания. Поскольку я использую async/await, мне нужно правильно обрабатывать исключения, а я этого не делал, отклонение распространялось, а ошибка обрабатывается nuxt. Поэтому изменив мой код на: 

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  methods: {
    async submit() {
      try {
        const res = await this.$axios.request({
          url: 'locahost:3000/404', // This route doesn't exists
          method: 'post',
          data: this.$data
        })

        console.log(res.status)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

Это предотвратит обработку ошибки в другом месте и приведет к перенаправлению на страницу 404 или что-то еще.

0 голосов
/ 20 апреля 2020

Вы можете опустить поведение формы, используя только данные в вашем методе отправки, и вызвать его, нажав @ на кнопке без какого-либо типа отправки, например: 

<template>
  <div class="container">
    <form>
      <input v-model="name" type="text" />
      <input v-model="email" type="text" />
      <button @click="() => submit()">Submit</button>
    </form>
  </div>
</template>

Подобным образом вы избежите любых вид побочного эффекта от формы, поскольку вам не нужны никакие данные формы в вашем топоре ios запрос ...

...