vuetify v-form에서 제공하는 함수

Vuetify의 `v-form` 컴포넌트는 다양한 유틸리티 함수를 제공하여 폼의 유효성 검사 및 초기화 등을 쉽게 처리할 수 있습니다. 이러한 함수들은 주로 `$refs`를 사용하여 접근됩니다.

아래는 `v-form`에서 제공되는 주요 함수들에 대한 설명입니다:

1. validate():
   - `validate()` 함수는 폼 내의 모든 입력 필드에 대한 유효성 검사를 수행합니다.
   - 이 함수는 모든 입력 필드가 유효하면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다.

<v-form ref="myForm">
  <!-- 폼 내의 입력 필드들 -->
</v-form>

this.$refs.myForm.validate()

2. reset():
   - `reset()` 함수는 폼 내의 모든 입력 필드를 초기 상태로 재설정합니다.
   - 이 함수는 입력 필드의 값을 초기 값으로 설정하고, 유효성 검사 에러 메시지를 초기화합니다.

this.$refs.myForm.reset()

3. resetValidation():
   - `resetValidation()` 함수는 폼 내의 유효성 검사 에러 메시지만 초기화합니다. 입력 필드의 값은 변경되지 않습니다.

this.$refs.myForm.resetValidation()

위의 함수들은 `v-form` 컴포넌트의 메서드로 사용됩니다. 폼을 참조할 때 `ref` 속성을 사용하여 해당 참조를 얻고, 그 참조를 통해 함수를 호출합니다. 위의 예제에서는 `myForm`이라는 참조를 사용하였습니다.

this.$refs.myForm.validate();          // 유효성 검사 실행
this.$refs.myForm.reset();             // 입력 필드 초기화 및 유효성 검사 에러 초기화
this.$refs.myForm.resetValidation();   // 유효성 검사 에러 초기화 (입력 필드 값은 변경되지 않음)

이러한 함수들을 활용하여 폼을 유연하게 제어할 수 있습니다.

 

* 모달 팝업에서 글을 등록/수정할 때 또는 글을 등록하고 다시 등록할때 valiate()가 작동하여 빨간색 에러 메시지가 보일 때가 있습니다. 

그런 경우 resetValidataion()을 사용하면 좋습니다. 

showDialog () {
    // 초기화 코드 
    if(this.$refs.myForm){
        this.$refs.myForm.resetValidation(); 
    }
    this.dialog = true
},