[TIL] (Vue) Vuelidate 라이브러리 validatiors 사용 시 $v.$invalid 값

해당 라이브러리를 사용했다.

https://vuelidate.js.org/

Vuelidate | A Vue.js library.

처음 보는 라이브러리의 validations 체크라 처음엔 조금 당황했는데, 어제 헤매면서 좀 적응이 된 것 같다.

validations 메세지를 div로 구현하는데, 이때 조건을 거는 방식이다.

 

보통 저장 버튼을 누를 때 메세지가 뜨면 되는데, 이때 v-if에서 걸어야 할 조건은 다음과 같다.

저장하는 함수가 실행될 때 + 해당 조건을 불만족할 때

 

이를 염두에 두면 다음과 같은 코드를 이해할 수 있다.

<template>
  <div>
        <div
          v-if="isSubmit && $v.params.list.$invalid" // list 안의 data01, 02 둘다 한번에 체크하기 위함
        >
          data는 필수 항목 입니다.
        </div>
        <div
          v-if="isSubmit && !$v.params.title.required" // 조건에 따라 노출 되도록 함
        >
          타이틀은 필수 항목 입니다
        </div>
  </div>
</template>


<script>
import { mapActions } from 'vuex'
import { required, integer } from 'vuelidate/lib/validators'

export default {
  data () {},
  validations: {
    params: {
      title: { required },
      list: {
      	data01: { integer },
        data02: { integer },
      }
    }
  },
  methods: {
    ...mapActions('actions', ['actDataInsert']),
 
    formSubmit () {
      this.$v.$touch() // validateion 전체 체크
      this.isSubmit = true
      if (!this.$v.$invalid) { // validation통과시 submit 실행
          const requestDatas = {
				// data here
          }
          this.actDataInsert(requestDatas)
        }
        this.isSubmit = false
      }
    }
  }

</script>

 

염두에 둘 것은 list 안의 data01, 02를 동시에 체크하기 위해선 list의 invalid 값을 받으면 된다는 것이다.

둘 중 하나라도 조건에 만족하지 못했을 때, list.$invalid에서 그 결과를 반영한다는 점을 잊지 말자.