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执行和表单提交，但我想避免重定向。

Answer 1

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

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

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

请参阅下面的示例。单击按钮后，如果没有刷新页面，该消息将会更改。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试@submit.prevent="myFunction()"，您的button可以改为<input type="submit" value="Submit"/>。 submit类型将触发表单提交，submit.prevent将阻止默认提交行为并根据需要执行myFunction。

这具有触发所需输入字段的表单验证的额外好处！

Answer 3

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

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

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

3 个答案: