해당 라이브러리를 사용했다.
처음 보는 라이브러리의 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에서 그 결과를 반영한다는 점을 잊지 말자.
'공부 > TIL' 카테고리의 다른 글
[TIL] Docker 관련 오류 해결 (0) | 2022.06.10 |
---|---|
[TIL] Vue 트리구조 component에 대한 고찰 (0) | 2022.05.27 |
[TIL] 페이지 첫 접속 시 데이터 처리 (0) | 2022.05.19 |
[TIL] (오류) vue store의 action에서 data list를 새로 받아올 때 특정 값을 가진 data만 들어옴 (0) | 2022.05.18 |
[TIL] Vue-MultiSelect (0) | 2022.05.18 |