我需要以编程方式提交表单，但我也需要将其发送到preventDefault。
现在我有以下内容：
submit() {
this.$refs.form.submit()
}
它工作正常，但我不能阻止默认提交，最终刷新页面。
【问题讨论】：
submit() 函数？不是$refs，而是外部函数？
标签： vue.js preventdefault
您可以将.prevent 修饰符添加到@submit（或您正在使用的任何其他v-on），如下所示：
<form @submit.prevent="myMethod">
<button type="submit"></button>
</form>
在提交表单的情况下，这将阻止刷新页面的默认行为。
有几种方法可以修改事件。
拨打
event.preventDefault()或event.stopPropagation()内部事件处理程序。虽然我们可以做到这一点 很容易在方法中，如果方法可以是纯粹的就更好了 关于数据逻辑，而不必处理 DOM 事件细节。为了解决这个问题，Vue 为 v-on 提供了事件修饰符。记起 修饰符是用点表示的指令后缀。
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form @submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div @click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div @click.self="doThat">...</div>
有时我们还需要在内联语句处理程序中访问原始 DOM 事件。您可以使用特殊的 $event 变量将其传递给方法：
<button @click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
// ...
methods: {
warn: function (message, event) {
// now we have access to the native event
if (event) {
event.preventDefault()
}
alert(message)
}
}
干杯:)
【讨论】：
不太明白@Armin Ayari 的回答，例如为什么代码必须在methods 对象中？无论如何，在 Vue 中，这对我有用：
<form ref="form" @submit.prevent="myMethod">
<button type="submit"></button>
</form>
这阻止了页面刷新并改为调用myMethod。
您甚至不需要ref。明白这是一个老问题，但我在调试后发现自己在这里，发现我的表单标签根本放错了位置。
【讨论】：
我不知道我是否正确理解了您的问题，但您可以像这样阻止表单的默认行为：
this.$refs.form.addEventListener("submit", (event) => {
event.preventDefault()
});
也许这可以帮助你：
new Vue({
el: '#app',
data: {},
methods: {
submit () {
this.$refs.form.addEventListener('submit', event => {
event.preventDefault()
})
},
alert () {
alert('hello')
}
}
})<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<div class="form-wrapper" @click='submit'>
<form ref='form' @submit='alert'>
<input type="text">
<button type='submit'>Submit</button>
</form>
</div>
</div>
</body>【讨论】：
我认为这是多纳帮助！
<form method="POST" action="http::localhost:8080/" @submit.prevent="submit_login($event)">
// enter yours inputs here
</form>
submit_login(e) {
if (true) {
e.target.submit();
},
},
【讨论】：
首先，不要使用 preventDefault 方法。我将在 jQuery 上说明这个问题：
$('#myForm').on('submit', function (event) {
// step 1.
// stop current action, prevent submitting
event.preventDefault()
// step 2.
// validate inputs
// some validation code
// step 3.
// everything ok, submit it
this.submit()
})
这段代码哪里出了问题？当您在第 3 步中以编程方式提交此表单时，它将再次被捕获并再次在第 1 步停止。因此，您将永远无法提交此表格。解决方案：
$('#myForm').on('submit', function (event) {
// step 1.
// validate inputs
// some validation code
// this code will be always executed
// before this form will be submitted
// step 2.
// then do something like this
// continue submitting form and exit
// this callback with returning true
if (inputsAre === 'ok') return true
// if inputs are not ok, program continues
// with following line, which ends this
// callback with false and form will be not submitted
return false
})
我希望你明白了。所以，我认为你需要的不是 preventDefault 方法，而是在 @submit 事件调用的 doSomething 方法中返回 true 或 return false。
【讨论】：