인프런 커뮤니티 질문&답변
작성한 질문수
Vue3 입력중 취소시 초기화
작성
·
2.1K
0
초기값이 존재하는 v-model로 연결된 input 태그에 입력중 취소 버튼을 누르면 다시 초기값으로 돌아가도록 만들고 싶은데 이미 반응형 데이터로 연결되어 있어 취소를 눌러도 입력중이던 값으로 저장되어있어요 ㅠㅠ
초기값으로 돌아가도록 하려면 어떻게 해야하나요?
답변 1
1
짐코딩
지식공유자
안녕하세요 :)
<template>
<form @reset.prevent="onReset">
<div>
<label for="name">Name</label>
<input v-model="formData.name" id="name" type="text" />
</div>
<div>
<label for="age">Age</label>
<input v-model="formData.age" id="age" type="text" />
</div>
<button type="reset">reset</button>
</form>
</template>
<script>
const getInitialFormData = () => ({ name: 'GYM CODING', age: 20 });
export default {
name: 'App',
};
</script>
<script setup>
import { ref } from 'vue';
const formData = ref(getInitialFormData());
const onReset = () => {
formData.value = getInitialFormData();
};
</script>초기데이터를 자바스크립트 함수(팩토리 함수)로 반환하도록 정의한 후 리셋(reset) 버튼 클릭 시 다시 초기값으로 되돌릴 수 있습니다. 이때 @reset 이벤트에 .prevent(preventDefault())를 추가하여 reset의 기본기능(빈 값으로 설정하는^^)을 막을 수 있습니다.