CODEWITHSUNDEEP
javascriptvue.js
Hamiprogrammer
Hamiprogrammer

Reputation: 47

event.preventDefault() doesn't work with form submit

the event.preventDefault() doesn't work

 <script type="text/javascript" src="vue.js"></script>

 <div id="app">
 <form v-on:submit.prevent="saveData">
 <input type="text" name="test">
 <button type="submit">Go</button>
 </form>
 </div>

<script type="text/javascript">
new Vue({
 'el': '#app',
      'methods':{
         'saveData': function(event){
             event.preventDefault();
  }
  }
 });
 </script>

Upvotes: 1

Views: 473

Answers (1)

acdcjunior
acdcjunior

Reputation: 135742

.prevent modifier is sufficient. You don't have to call event.preventDefault() inside the handler.

See demo below. There are two forms, one with .prevent and one without. Notice the first just logs. The second logs and goes to another page (the form submits).

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <form v-on:submit.prevent="saveData">
    <input type="text" name="test">
    <button type="submit">Go</button>
  </form>
  <hr>
  <form v-on:submit="saveData">
    <input type="text" name="test">
    <button type="submit">I WONT PREVENT</button>
  </form>
</div>

<script type="text/javascript">
  new Vue({
    'el': '#app',
    'methods': {
      'saveData': function(event) {
        console.log('I was called');
      }
    }
  });
</script>

Upvotes: 2

Related Questions