vee-validate 2.x 라이브러 사용할 때 알면 좋을 몇가지 팁

VeeValidate는 Vue에 폼 요소의 유효성 체크를 쉽게 도와주는 라이브러리입니다.

사용법이 간단해서 잘 알고 사용한다면 매우 유용합니다.

 

버전 2 이후 3, 4도 나왔는데 문법이 많이 다릅니다.

이 글에서는 프로젝트에서 사용한 2 버전을 기준으로 설명드립니다.

 

설치는 npm으로 설치하면 됩니다.

npm install vee-validate@"<3.0.0" --save

Vue.use로 사용을 활성화시킵니다.

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

 

Tip1. class 옵션으로 validate, invalidate 상태에 따라 class 추가가 쉽다.

VeeValidate에서 제공하는 몇 가지 옵션 중에 classes를 true 설정하고 valid, invalid 상황에 추가할 클래스를 지정해줍니다.

Vue.use(VeeValidate, {
  classes: true,
  classNames: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
});

 

 

Tip2. v-if, v-for 함께 사용할 때 유니크한 key 값을 넣어줘야 한다.

UI는 동일한데 데이터가 변경되는 경우

유니크한 key 값을 지정하지 않으면 이전의 상태(에러 상태)가 유지됩니다.

<input type="text" name="description-name"
  v-validate="'required'"
  key="유니크한 값"
  placeholder="입력해주세요."
  v-model.trim="description"/>

예를 들어 할 일 목록이 있고 할일 목록을 눌렀을 때 상세한 페이지 옆으로 노출된다는 기능을 했을 때입니다.

Tip3. v-if와 사용될 때 use attach() first 에러를 만날 때 처리 방법

 

vee-validate.esm.js?b14b:305 Uncaught (in promise) Error: [vee-validate] Validating a non-existent

v-if 조건이 selected 여부에 따라 노출된다면 watch에 아래처럼 코드를 넣어줍니다.

공식 문서에서는 key 값을 넣어주면 된다고 설명하고 있지만 실제로는 동작하지 않아서 아래 코드를 넣어 해결했습니다.

watch: {
    selected() {
      this.$validator.pause();
      this.$nextTick(() => {
        this.$validator.resume();
      });
    },
}