在 Vue 中使用事件修饰符 .prevent 提交表单而不进行重定向

Question

我在我的应用程序中使用 Vue，我想知道如何提交表单但避免重定向。根据官方 Vue 文档，可以通过以下方式实现：

 <!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

这是我的表格的一部分：

 <form class="myForm" action="/page" method="post" @submit.prevent="onSubmit">
    <input name="email" type="email" placeholder="e-mail" v-model="email">
    <button @click="myFunction()">

它的工作原理是页面不再被重定向，但我收到一条错误消息，指出 onSubmit 方法未定义。所以我不明白我应该如何定义它。另一方面，我可以只写 @submit@prevent 但据我了解，它完全阻止了提交，这不是我想要的。在没有 ajax、axios 和那种技术的情况下，有没有合适的方法来做到这一点？我想要的是执行 myFunction 并提交表单，但我想避免重定向。

原文由 Bill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

onSubmit 应该是 vue 实例上的 methods 属性中的一个函数。 IE

 methods: {
  onSubmit () {
    // DO Something
  }
}

然后正如文档所说，使用 <form v-on:submit.prevent="onSubmit"></form> 是正确的。我在我的应用程序中使用它。

请参见下面的示例。在不刷新页面的情况下单击按钮后，消息将更改。

 var vm = new Vue({
  el: '#app',
  data () {
    return {
      test: 'BEFORE SUBMIT'
    }
  },
  methods: {
    onSubmit () {
      this.test = 'AFTER SUBMIT'
    }
  }
});

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  {{test}}
  <form v-on:submit.prevent="onSubmit">
    <button>Submit!</button>
  </form>
</div>

原文由 webnoob 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只需使用 @submit.prevent （没有任何等号）。

然后，在按钮上定义 @click="doAction()" 。

原文由 Exis Zhang 发布，翻译遵循 CC BY-SA 4.0 许可协议