[vue.js] VUE3.0 form태그 사용시 SUBMIT(enter키) 막기 (@event.prevent)

선요약:

@event.prevent 사용 : <form id="inputForm" @submit.prevent="inputText()">

또 다른 구문 :  <form v-on:submit.prevent>

<template>
    <div>
        <form id="inputForm" @submit.prevent="inputText()">
            <input type="text" v-model="textVal" ref="refInput"/>
        </form>
    </div>
</template>

 

설명

문제점 : vue form태그에서 엔터키 사용시(IOS ,AOS,WEB의 Enter 키) 페이지가 새로고침 된다.

 - 이는 VUE를 구성하는 SPA(Single Page Application)특성상 필요없는 행위라고 생각한다. 

 - 새로고침하면 store정보가 초기화가 된다.

 

해결법

  1) form태그를 처음부터 사용하지 않는다.

  2) javascript의 e.preventDefault()의 같은 문법인 위에 코드를 사용한다.