form자동으로 넘어가는거 방지 event.preventDefault()

아래와 같이 소스를 만들면 [로그인]을 클릭하면 화면이 리로드되면서 데이터가 사라진다.

<template>
  <form v-on:submit="submitForm">
    <div>
      <label for="username">id:</label>
      <input id="username" type="text" v-model="username" />
    </div>
    <div>
      <label for="password">PW:</label>
      <input id="password" type="psassword" v-model="password"  />
    </div>
    <button type="submit">login</button>
  </form>
</template>
 
<script>
export default {
  data:function(){
    return{
       username : '',
       password : '',
    }
  },
  methods:{
    submitForm:function(){
      console.log(this.username, this.password);
      
    }
  }
};
</script>
 
<style>
</style>

메서드에 매개변수를 event를 넣어주고

event.preventDefault(); 를 넣어준다.

다시 실행해하고 [login]을 클릭하면 화면이 리로드 되지 않는다.

  methods:{
    submitForm:function(event){
      event.preventDefault();
      console.log(this.username, this.password);
      
    }

더 간단하게 하려면 아래의 방법으로 하면된다.

<form v-on:submit.prevent="submitForm">

<template>
  <form v-on:submit.prevent="submitForm">
    <div>
      <label for="username">id:</label>
      <input id="username" type="text" v-model="username" />
    </div>
    <div>
      <label for="password">PW:</label>
      <input id="password" type="psassword" v-model="password"  />
    </div>
    <button type="submit">login</button>
  </form>
</template>
 
<script>
export default {
  data:function(){
    return{
       username : '',
       password : '',
    }
  },
  methods:{
    submitForm:function(){
      console.log(this.username, this.password);
      
    }
  }
};
</script>
 
<style>
</style>