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

【问题标题】：Conditionally add @submit.prevent to a form in Vue.js有条件地将 @submit.prevent 添加到 Vue.js 中的表单
【发布时间】：2021-06-13 06:20:30
【问题描述】：

我正在尝试使用@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 非常陌生。任何帮助表示赞赏。谢谢！

【问题讨论】：

标签： vue.js vuetify.js vue-props vue-events

【解决方案1】：

正如 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`)
      }
    }
  }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢安迪，你能解释一下我在哪里使用提交吗？你会把这个函数放在哪里？我还在纠结 Vue。