如何解决有条件地将@submit.prevent 添加到 Vue.js 的表单中
我正在尝试使用 @submit.prevent
有条件地阻止 HTML 表单提交。我有一个看起来像这样的通用表单模型(最小化一点):
<v-form v-model="valid">
<div>
<div v-for="(field,i) in fieldConfig" :key="`model-form-`+i">
<fe-label v-if="field.label">{{field.label}}</fe-label>
<component
:is="field.component"
v-bind="field.attrs"
v-model="item[field.field]"
/>
</div>
</div>
</v-form>
从父母那里调用:
<model-form
idProperty="id"
@done="finishRename"
model="myModel"
:fieldConfig="fieldConfig"
:htmlSubmit="false"
/>
我在搜索中看到了一些类似的东西,但都不是很正确,而且我对 Vue 还很陌生。任何帮助表示赞赏。谢谢!
解决方法
不要在这种情况下使用 submit.prevent
。只需使用 submit
,并在您的函数中,有条件地阻止。
onSubmit(e) {
if(condition) e.preventDefault();
}
,
正如 Andy 指出的,@submit.prevent
不应用于条件表单提交,因为 .prevent
modifier 会自动调用 Event.preventDefault()
。
要有条件地调用它,您必须删除 .prevent
修饰符,并在事件处理程序中预先评估 htmlSubmit
标志:
<v-form @submit="onSubmit" action="https://example.com">
export default {
methods: {
onSubmit(e) {
if (!this.htmlSubmit) {
e.preventDefault() // don't perform submit action (i.e.,`<form>.action`)
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。