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

Answer 1

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

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

Answer 2

onSubmit应该是methodsvue实例上属性中的函数.即

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>