[Vue] - Vue Forms

Vue.js에서 폼 (Forms)을 사용하면 사용자 입력을 쉽게 관리하고 바인딩할 수 있습니다. Vue는 양방향 데이터 바인딩을 지원하여, 폼 요소와 Vue 인스턴스의 데이터 간의 동기화를 자동으로 처리합니다. 이 기능은 사용자 입력을 실시간으로 반영하고, 입력된 데이터를 쉽게 수집할 수 있게 해줍니다.

기본적인 폼 요소와 바인딩

1. 텍스트 입력 (Text Input):

   • 사용자가 텍스트를 입력할 수 있는 기본적인 입력 요소입니다.
   • v-model 디렉티브를 사용하여 데이터와 바인딩할 수 있습니다.

   <template>
     <div>
       <input type="text" v-model="textInput" placeholder="Type something..." />
       <p>You typed: {{ textInput }}</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         textInput: ''
       }
     }
   }
   </script>
   

2. 체크박스 (Checkbox):

   • v-model을 사용하여 체크 상태를 데이터와 바인딩할 수 있습니다.

   <template>
     <div>
       <input type="checkbox" v-model="isChecked" />
       <label>Check me</label>
       <p>{{ isChecked ? 'Checked' : 'Not Checked' }}</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isChecked: false
       }
     }
   }
   </script>
   

3. 라디오 버튼 (Radio Button):

   • 여러 선택지 중 하나를 선택할 수 있는 입력 요소입니다.
   • 각 라디오 버튼에 v-model을 바인딩하여 선택된 값을 저장할 수 있습니다.

   <template>
     <div>
       <input type="radio" id="option1" value="Option 1" v-model="selectedOption" />
       <label for="option1">Option 1</label><br>
       <input type="radio" id="option2" value="Option 2" v-model="selectedOption" />
       <label for="option2">Option 2</label><br>
       <p>Selected: {{ selectedOption }}</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         selectedOption: ''
       }
     }
   }
   </script>
   

4. 셀렉트 박스 (Select Box):

   • 여러 옵션 중 하나를 선택할 수 있는 입력 요소입니다.
   • v-model을 사용하여 선택된 값을 바인딩합니다.

   <template>
     <div>
       <select v-model="selected">
         <option disabled value="">Please select one</option>
         <option>A</option>
         <option>B</option>
         <option>C</option>
       </select>
       <p>Selected: {{ selected }}</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         selected: ''
       }
     }
   }
   </script>
   

폼 제출 처리

폼 제출 시 @submit 이벤트를 사용하여 제출을 처리할 수 있습니다. 기본 동작을 방지하고 데이터를 처리하는 방법은 다음과 같습니다.

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="name" placeholder="Enter your name" required />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    handleSubmit() {
      alert(`Submitted Name: ${this.name}`);
      this.name = ''; // 입력 필드 초기화
    }
  }
}
</script>

폼 유효성 검사

Vue에서는 입력값의 유효성을 검사할 수 있습니다. 유효성 검사 로직을 구현하여 조건에 맞지 않을 경우 경고 메시지를 표시하거나 제출을 막을 수 있습니다.

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="email" placeholder="Enter your email" required />
    <span v-if="!isEmailValid">Invalid email format</span>
    <button type="submit" :disabled="!isEmailValid">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  computed: {
    isEmailValid() {
      const emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
      return emailPattern.test(this.email);
    }
  },
  methods: {
    handleSubmit() {
      alert(`Submitted Email: ${this.email}`);
      this.email = ''; // 입력 필드 초기화
    }
  }
}
</script>

요약

• Vue.js의 폼 요소는 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 지원합니다.
• 다양한 입력 요소(텍스트, 체크박스, 라디오 버튼, 셀렉트 박스 등)를 쉽게 구현할 수 있습니다.
• 폼 제출 시 이벤트를 처리하고 유효성 검사를 통해 데이터의 정확성을 유지할 수 있습니다.
• Vue.js를 사용하여 폼의 상태 관리와 유효성 검사가 간편하게 이루어질 수 있습니다.