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

Question

I'm trying to conditionally prevent HTML form submission using @submit.prevent. I have a generic form model that looks like this (minimized a bit):

<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>

Called from a parent:

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

I've seen some similar things in my searching but nothing quite right, and I'm pretty raw when it comes to Vue. Any help is appreciated. Thanks!

Andy Abi Haidar · Accepted Answer · 2021-03-15 23:48:26Z

5

Don't use submit.prevent in this scenario. Just use submit, and in your function, conditionally prevent.

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

answered Mar 15, 2021 at 23:48

Andy Abi Haidar

1713 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

daprezjer Over a year ago

Thanks Andy, can you explain a bit more where exactly I'm using submit, and where you'd place this function? I'm still wrapping my head around Vue.

tony19 · Accepted Answer · 2022-07-16 00:05:19Z

2

As Andy pointed out, @submit.prevent should not be used for conditional form submission because the .prevent modifier automatically calls Event.preventDefault().

To conditionally call it, you'd have to remove the .prevent modifier, and evaluate the htmlSubmit flag beforehand within the event handler:

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

edited Jul 16, 2022 at 0:05

answered Mar 16, 2021 at 3:24

tony19

140k23 gold badges281 silver badges354 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related