반응형
form의 기본적인 동작은 서버로 보내는 것이다.
그러면서, 화면의 데이터가 리셋되게 된다.
submit.prevent는 이런 form의 기본 동작이 되지 않도록 제어한다.
form의 기본적인 동작
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<form>
<input type='text'>
<button> 클릭하세요 </button>
</form>
</div>
</template>
<script>
export default {
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
}
</style>
버튼을 클릭하면, form의 기본적인 동작이 실행된다.
submit.prevent
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<form v-on:submit.prevent='btnClick'>
<input type='text'>
<button> 클릭하세요 </button>
</form>
</div>
</template>
<script>
export default {
methods: {
btnClick() {
alert('hello!')
}
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
}
</style>
v-on:submit.prevent
form의 기본적인 동작이 수행되지 않고,
지정한 메서드가 실행된다.
Javascript에서의 event.preventDefault()와 같은 효과가 있다.
반응형
'IT > Vue' 카테고리의 다른 글
| [Vuejs] methods, computed, watch 차이 (0) | 2023.01.17 |
|---|---|
| [Vuejs] v-model (양방향 바인딩) (0) | 2023.01.17 |