vuejs에서 laravel 유효성 검사 오류를 표시하는 방법

이 주제를 다루는 여러 리소스가 있지만 vuejs 구성 요소에서 기존 루프뿐만 아니라 이번에는 중첩 루프를 사용하여 laravel 유효성 검사 오류를 표시해야 하는 상황에 대한 솔루션을 공유하고 싶습니다. 당신은 우리가 끝날 때까지 더 잘 이해할 것입니다.

참고: laravel에서 API를 작성하거나 vuejs 앱 프런트엔드를 빌드하는 방법에 대해서는 자세히 설명하지 않겠습니다. laravel 및 Vuejs 작성에 익숙하다면 익숙한 코드 스니펫으로 이 주제에 대해 논의하겠습니다.

다음과 같이 백엔드에서 오류 응답을 반환한다고 가정해 보겠습니다.

  public function register(Request $request)
    {

        $validator = Validator::make($request->all(), [
            'name' => 'required|string',
            'email' => 'required|email|unique:users',
            'gender' => 'required',
        ]);

        if ($validator->fails()) {    
            return response()->json($validator->messages(), 400);
        }
}

사용자가 프런트엔드에 빈 필드가 있다고 가정해 보겠습니다. 따라서 브라우저 네트워크 탭에서 백엔드의 laravel 유효성 검사 오류 응답은 다음과 같습니다.



이제 Vuejs 구성 요소에서;
응답 오류를 할당하는 데이터 개체에 상태가 있습니다.

export default {

  data() {
    return{

    notifmsg: ''
         }
    },

catch() 함수에서 다음과 같이 laravel 유효성 검사 응답을 할당합니다.

.then(()=> {
// do some magic stuff here
    }).catch(e => {
       this.notifmsg = e.response.data
})

이제 문제는 다음과 같습니다.
백엔드에서 받은 응답을 반복하는 전통적인 방법을 사용하면 다음과 같습니다....

<div v-for="(errorArray, index) in notifmsg" :key="index">
<span class="text-danger">{{ errorArray}} </span>
</div>

...FE의 출력은 다음과 같습니다.



그래...이건 우리가 원하는게 아니지? 예.

그 이유는 laravel 앱의 유효성 검사 오류 응답이 객체 배열로 반환되기 때문입니다. 따라서 이를 해결하려면 다음과 같이 중첩 루프를 수행해야 합니다.

<div v-for="(errorArray, idx) in notifmsg" :key="idx">
    <div v-for="(allErrors, idx) in errorArray" :key="idx">
        <span class="text-danger">{{ allErrors}} </span>
    </div>
</div>

출력은 다음과 같습니다.



팔...! 이것이 우리가 실제로 달성하고자 하는 것입니다. 읽어 주셔서 감사합니다...

의견이 있으시면 댓글 섹션에 기여를 남겨주세요...