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

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

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>