vue.js - 将表单提交推迟到方法？

Question

我有一个表格:

<form id="myForm" @submit.prevent="doSomething()">...</form>

在 doSomething() 中，我进行检查，如果为真，我想提交表单。检查后如何提交表单？

Answer 1

向表单添加 ref 属性

您可以向表单元素添加一个ref 属性。然后，在 doSomething 方法中，您可以通过 this.$refs.form.submit() 提交表单。

模板:

<form id="myForm" ref="form" @submit.prevent="doSomething()">...</form>

Vue 组件方法:

doSomething() {
  // do something
  
  this.$refs.form.submit();
}

有关引用文献的更多信息:https://v2.vuejs.org/v2/api/#ref

将事件对象传递给方法

您还可以通过添加 $event 参数将事件对象传递给 doSomething。这为方法提供了对目标元素的引用:

模板:

<form id="myForm" @submit.prevent="doSomething($event)">...</form>

Vue 组件方法:

doSomething(e) {
  // do something
  
  e.target.submit();
}