Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

Alert 공통 컴포넌트

섹션4 >alert > validator오류

작성

468

validator 경고가 떠서 어떤 부분에서 경고가 뜨는지 알 수가 없어서 질문드립니다!

질문.PNG

vue.js

답변 4

Minkoo Lee

일단 const alertType = ref('error');

위처럼 기본값 넣어주면 Warning이 사라집니다.

PostDetailView에서 PostEditView로 넘어올때 기본값이 없으니 validator에 걸린 걸로 보입니다.

강의 내용에는

const alertType = ref('');
const vAlert = (message, type = 'error') => { ...... }
//위 내용을 아래처럼 바꾸시면 Warning이 사라집니다.
const alertType = ref('error');
const vAlert = (message, type) => { ...... }

강의 내용에는 함수가 실행될때만 기본값이 들어가 있으므로, ref선언시 기본값 넣어주면 사라집니다.

bluescreen

alert 공통 컴포넌트

수정이 완료 되었습니다.
네트워크 오류!

2번 메시지를 확인 하고 싶은데요

코딩님 설명은 ... api 서버 내리고 refresh 하면 노출 되게 되있습니다.

저도 강의내용같이 "수정 완료되었습니다."
2. 서버 내리고

다시 하면 "네트워크 오류"가 나타나야 하는데

전 api 서버 내리고 refresh를 하면

사이트에 연결할 수 없음

127.0.0.1에서 연결을 거부했습니다.

화면이 나타 납니다.

' 네트워크 오류 ' 메시지가 안뜨고 위 메시지가 뜨는 이유를 알고 싶습닏다.

ㅡㅡ;

영준

질문자

(1) 수정 버튼클릭시 vAlert()실행

(2) vAlert(type='error') 인자가 없을경우 error 설정

(3) :type="alertType"을 통해 type의 값을 빈값으로 보낼 수 없음

아래 코드봤을 때 통해 빈값이 갈 수 없다고 생각합니다.

빈값 갈 수 없는게 맞지 않나요??

빈값 갈수 없는게 맞는지만 확인 부탁드리겠습니다

항상 빠른답변주셔서 감사합니다!

짐코딩

지식공유자

안녕하세요 :)

이점을 잘 생각해보시면 좋을 거 같아요.

해당 유효성 검증 실패는 vAlert() 함수 호출 시점이 아닌 <AppAlert />컴포넌트 랜더링 시점에 발생된 오류입니다.

const alertType = ref(''); 초기값이 ''(빈값)이며 랜더링 시점에 빈값으로 바인딩 되기 때문입니다.

영준

질문자

아~ 그렇군요 덕분에 이해되지 못한 부분이 해결되었습니다.

감사합니다!

경이

같은 문제로 막혀서요 ㅠㅠ 어떻게 해결하셨나요 ..

짐코딩

지식공유자

안녕하세요 :)

custom validator check failed for prop "type"

Props "type"에 대한 유효성 검증이 실패해서 오류로 표기가됐네요.

코드를 보면 "type"은 값이 "success" 또는 "error"가 와야 하는데 ""(빈값)이 들어간 것 같은데요?

인프런 커뮤니티 질문&답변

섹션4 >alert > validator오류

사이트에 연결할 수 없음