Nuxt.js 页面重新加载以提交，即使使用 stop.prevent答案

【问题标题】：Nuxt.js page reloading on for submission even with stop.preventNuxt.js 页面重新加载以提交，即使使用 stop.prevent
【发布时间】：2020-08-02 16:23:22
【问题描述】：

我一直在阅读一些关于这个完全相同主题的问题，但似乎没有一个对我有用，我无法发现错误。

我有这个表格：

<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。

我想在脚本部分处理 axios 请求中的任何可能错误，并基于该错误更新页面（显示错误 div 或其他），但不重新加载它。但是，页面会重新加载并进入 404 错误页面。

我正在使用 Nuxt 2.12.2，但我看不出我做错了什么。任何帮助将不胜感激。

谢谢大家！

【问题讨论】：

标签： javascript vue.js axios nuxt.js

【解决方案1】：

您可以通过仅使用提交方法中的数据来省略表单行为，并通过@click 按钮触发它而无需任何提交类型，如下所示：

<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>

这样您将避免表单的任何副作用，因为您的 axios 请求中不需要任何表单数据...

【讨论】：

实际上我确实需要在我的 axios 请求中发送表单数据。无论如何，谢谢你的帮助。错误在其他地方，这是因为未处理的承诺拒绝。
是的，没问题，我的意思是“表单数据”，而不是您从表单中获得的数据，无论如何您将在请求中将其作为 json 加以利用……但很高兴看到您解决了您的问题！
哦！对不起，雨果，我误会了你！再次感谢

【解决方案2】：

好的，我只是通过反复试验找到了答案，而且比我想象的要容易......这只是关于未处理的承诺拒绝。当我使用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 页面或其他任何内容。

【讨论】：