vue.js - 有条件地将 @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();
}