javascript - event.preventDefault() 不适用于表单提交

Question

event.preventDefault() 不起作用

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

Answer 1

.prevent modifier足够了。您不必在处理程序中调用 event.preventDefault()。

请参阅下面的演示。有两种形式，一种有 .prevent ，一种没有。注意第一个只是日志。第二个记录并转到另一个页面(表单提交)。

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