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

发布于12月30日

我在应用程序中使用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，但据我所知，它完全阻止提交，这不是我想要的.

推荐答案

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

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

然后正如doctor 所说，使用<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>