Javascript 在 Vue 中使用事件修饰符 .prevent 提交表单而无需重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48028718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using event modifier .prevent in Vue to submit form without redirection
提问by Bill
I'm using Vue in my application and I would like to know how to submit a form but avoid redirection. According to the official Vue doc it can be achieved in the following way:
我在我的应用程序中使用 Vue，我想知道如何提交表单但避免重定向。根据 Vue 官方文档，它可以通过以下方式实现：
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
Here is my part of my 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()">
It sorta works in the sense that the page is no longer redirected but I get an error saying that onSubmitmethod is not defined. So What I don't understand is how I should define it. On the other hand I could just write @submit@preventbut as far as I understand it completely prevents submission and that's not what I'm looking for.
Is there a proper way to do this without ajax, axios and that sort of technologies?
What I want is myFunction to execute and form to submit but I would want to avoid redirection.
它的工作原理是页面不再重定向，但我收到一条错误消息，指出该onSubmit方法未定义。所以我不明白的是我应该如何定义它。另一方面，我可以只写，@submit@prevent但据我所知，它完全阻止了提交，这不是我想要的。没有 ajax、axios 和那种技术，有没有合适的方法来做到这一点？我想要的是要执行的 myFunction 和要提交的表单，但我想避免重定向。
回答by webnoob
onSubmitshould be a function within your methodsproperty on the vue instance. I.e
onSubmit应该是methodsvue 实例上的属性中的一个函数。IE
methods: {
onSubmit () {
// DO Something
}
}
Then as the docs say, using <form v-on:submit.prevent="onSubmit"></form>is correct. I use this in my app.
然后正如文档所说，使用<form v-on:submit.prevent="onSubmit"></form>是正确的。我在我的应用程序中使用它。
See the example below. The message will change once the button is clicked without a page refresh.
请参阅下面的示例。单击按钮后，消息将更改而不刷新页面。
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>回答by Exis Zhang
Just use @submit.prevent(without any equal signs).
只需使用@submit.prevent（没有任何等号）。
Then, define @click="doAction()"on the button.
然后，@click="doAction()"在按钮上定义。
回答by B. Fleming
Try @submit.prevent="myFunction()", and your buttoncould instead be <input type="submit" value="Submit"/>. The submittype will trigger the form to submit, and the submit.preventwill prevent the default submit behavior and execute myFunctionas desired.
尝试@submit.prevent="myFunction()"，你button可以改为<input type="submit" value="Submit"/>。该submit类型将触发表单提交，并且submit.prevent将阻止默认提交行为并myFunction根据需要执行。
This has the additional benefit of triggering form validation for required input fields!
这具有触发所需输入字段的表单验证的额外好处！
