有条件地将@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`)
      }
    }
  }
}