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

Question

我正在尝试有条件地阻止使用@submit.prevent. 我有一个看起来像这样的通用表单模型（最小化了一点）：

<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 非常陌生。任何帮助表示赞赏。谢谢！

Answer 1

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

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

Answer 2

正如 Andy 指出的，@submit.prevent不应该用于有条件的表单提交，因为.prevent修饰符会自动调用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`)
      }
    }
  }
}