[Vue] submit event 발생 시 새로 고침 막기

개발

[Vue] submit event 발생 시 새로 고침 막기

yun000 2025. 3. 7. 15:48

기대 효과

form 에서 submit event가 발생 할 때 새로고침 되는 것을 막을 수 있다.

코드

onSubmitForm(e){
   e.preventDefault();
}

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>


<body>
    <div id="app">
        <form  v-on:submit="onSubmitForm">
            <input type="number" v-model="num">
            <button>click</button>
            <div>{{num}}</div>
        </form>
    </div>
</body>


<script>
    const app=new Vue({
        el:'#app',
        data:{
            num:'',
        },
        methods:{
            onSubmitForm(e){
                e.preventDefault();
                this.num+='100';
            }
        }
    });
</script>
</html>