Vue.js Form submits immediately shown with v-if

Question

Am building a Wordpress plugin and am Using Vue Js. I set up a variable that will be set to true on a button click Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)

The problem is that once the value changes, on button pressed, the form submits immediately.

This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.

Vue.js Data object

{
  selected_to_show : false,
}

The modal div

<div v-if="selected_to_show === true" class='mp-modal'>

  <form on:submit.prevent="xhrSubmit()">

  <form>
</div>

<button v-on:click="selected_to_show = true"></button>

This works but once the modal opens, the form submits immediately.

Note: There is only two button elements in the form where are all set to type="button"

The target is to prevent the form from submitting automatically when shown

There are two mistakes in the code provided. The closing <form> tag is missing a slash and the submit listener needs to be v-on: rather than on:. However, neither of these explains why the form is submitting. My guess would be that you've got code to submit the form that is running prematurely but you haven't included that code so it's difficult to know exactly. e.g. Could be a v-on that's incorrectly been written as a v-bind. — skirtle

ßãlãjî ßãlãjî · Accepted Answer · 2019-08-31T17:49:37

You did Everything right,if you want avoid auto submit while you click the button just rewrite your like this

<div v-if="selected_to_show === true" class='mp-modal'>
  <form>
  <form>
</div>
<button v-on:click="xhrSubmit()"></button>

and method how looks like

methods:{

xhrSubmit(){

this.selected_to_show = true;
//your code here
}
}

Vue.js Form submits immediately shown with v-if

1 Answers