작성한 질문수 3

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의 기본기능(빈 값으로 설정하는^^)을 막을 수 있습니다.