[Vue.js] Vue 폼 제출 이벤트 처리하기

<template>
  <div>
    <!-- 예제 1: 폼을 제출하면 onSubmit 메서드가 호출되고, 페이지 리로드를 방지합니다. -->
    <form @submit.prevent="onSubmit">
      <button type="submit">제출</button>
    </form>

    <!-- 예제 2: 다른 버튼을 클릭하면 submit 이벤트를 발생시키고, 페이지 리로드를 방지합니다. -->
    <button @click="triggerSubmit">폼 제출</button>

    <!-- 예제 3: input 요소의 값을 변경할 때마다 submit 이벤트를 발생시키고, 페이지 리로드를 방지합니다. -->
    <input type="text" @input="triggerSubmit" />
  </div>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      console.log('폼 제출됨');
    },
    triggerSubmit() {
      this.$refs.form.submit();
    },
  },
};
</script>

Vue에서는 폼 제출 이벤트인 submit 이벤트에 .prevent 수식어를 사용하여 페이지의 리로드를 방지할 수 있습니다. 이를 통해 SPA(Single Page Application)에서 페이지 전환 없이 폼을 제출할 수 있습니다.

1. 예제 1: 폼을 제출하면 onSubmit 메서드가 호출되고, 페이지의 리로드를 방지합니다. 이를 통해 폼 제출 시 필요한 동작을 수행하고 페이지 전환이 발생하지 않습니다.

2. 예제 2: 다른 버튼을 클릭하면 triggerSubmit 메서드가 호출되고, 해당 버튼이 속한 폼의 submit 이벤트를 발생시킵니다. 이를 통해 다른 요소에서도 폼을 제출할 수 있습니다.

3. 예제 3: input 요소의 값이 변경될 때마다 triggerSubmit 메서드가 호출되어 폼의 submit 이벤트를 발생시킵니다. 이를 통해 입력 내용이 변경될 때마다 폼을 제출할 수 있습니다.

Vue에서 폼 제출 이벤트를 처리하면서 페이지 리로드를 방지하면, 사용자 경험을 향상시키고 SPA의 기능을 완성할 수 있습니다. 페이지를 새로고침하지 않고도 데이터를 제출하고 처리할 수 있어, 웹 애플리케이션의 사용성을 향상시킬 수 있습니다.