有条件地将 @submit.prevent 添加到 Vue.js 中的表单

Question

我正在尝试使用 @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>

从 parent:

调用

<model-form
   idProperty="id"
   @done="finishRename"
   model="myModel"
   :fieldConfig="fieldConfig"
   :htmlSubmit="false"
/>

我在搜索中看到了一些类似的东西，但没有什么是完全正确的，而且我对 Vue 还很生疏。任何帮助表示赞赏。谢谢！

Answer 1

不要在这种情况下使用 submit.prevent。只需使用 submit，并在您的函数中有条件地阻止。

onSubmit(e) {
   if(condition) e.preventDefault();
}

Answer 2

正如 Andy 所指出的，@submit.prevent 不应该用于条件表单提交，因为 .prevent modifier automatically calls 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`)
      }
    }
  }
}

有条件地将 @submit.prevent 添加到 Vue.js 中的表单

Conditionally add @submit.prevent to a form in Vue.js

vue.js

vuetify.js

vue-props

vue-events