Vue.js에서 v-form 태그 @submit 막는 방법

Vue.js에서 폼(form)을 제출할 때, 특정 조건에 따라 제출을 막고 싶을 때가 있습니다. 이 글에서는 v-form 태그의 @submit 이벤트를 활용하여 폼 제출을 조건부로 막는 방법을 알아보겠습니다.

설정 방법

1. v-form 태그를 사용하여 폼을 생성합니다.
2. @submit 이벤트 핸들러를 정의합니다.
3. 이벤트 핸들러 내에서 조건을 확인하고, 필요한 경우 e.preventDefault()를 호출하여 폼 제출을 막습니다.

예제

예제 1: 간단한 폼

<template>
  <v-form @submit="onSubmit">
    <!-- 폼 요소들 -->
    <input type="text" v-model="username" />
    <!-- ... -->
    <button type="submit">제출</button>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      // ...
    };
  },
  methods: {
    onSubmit(e) {
      if (/* 조건 */) {
        e.preventDefault(); // 폼 제출 막기
        // 추가 로직
      }
    },
  },
};
</script>