ValidationProvider required_if

VeeValidate는 참 유용한 프레임워크이다.

여러가지 룰베이스 체크를 태그 하나만 넣어줌으로써 간단하게 체크할 수 있다.

또한 사용자가 원하는 조건베이스의 체크도 가능하다.

이번엔 사용하던 중에 프로필 수정 시에는 특정 필드를 입력하지 않아도 프로필 업데이트가 가능하도록 수정해야할 필요성이 있었다.

예를들면 이미지의 경우 서버에서 이미지를 받아와도 이미지 출력만하지 다른 컴포넌트처럼 tag에 입력되지 않는다.

그래서 업데이트를 하는 경우 file-input은 required를 체크하면 안된다.

하지만 생성시에는 이미지 첨부가 꼭 되어야하기 때문에, 업데이트와 rule check 조건이 달라지게 되는 것이다.

따라서 내 아이디어는 프로필을 생성시에는 id가 넘어오지 않고, 수정시에는 넘어온다는 아이디어를 가지고

required_if를 통해서 id가 있는 경우에는 rule을 꺼주고, id가 없는 경우에는 rule을 키게끔 구현하려고 했다.

하지만 아래 공식문서를 보면 특정 데이터가 있는 경우에 rule을 활성하고, 없는경우에 rule을 끄는 기능 밖에 없었다.

logaretm.github.io/vee-validate/guide/rules.html#rules

[

Available Rules | VeeValidate

Available Rules The following are the validation rules available for you, remember that they are not installed by default and you need to import and install them yourself, this allows you to only import what you need while keeping the bundle size for your

logaretm.github.io

](https://logaretm.github.io/vee-validate/guide/rules.html#rules)

따라서 required_if는 사용할 수 없었고

다시한번 공식문서 중

logaretm.github.io/vee-validate/advanced/dynamic-rules.html

[

Dynamic Rules | VeeValidate

logaretm.github.io

](https://logaretm.github.io/vee-validate/advanced/dynamic-rules.html)

dynamic-rules를 알게 되었고, vue의 computed 기능을 통해서 id 값 여부에 따라 true false를 리턴하도록함으로서 원하는 기능을 구현하였다.

 

 

template

<tag
    	:rules="`${required?'required':''}|size:1024`"
    >
    </tag>

js

computed: {
    reuiqred() { return this.id==undefined },
}