vue-chartjs로 개발을 수행하다보면 아래와 같은 Error를 만날 수 있습니다. 그 이유에 대해서 간단히 살펴보도록 하겠습니다.
[Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null
보통 개발을 수행하면, 사용하는 library의 개발자 혹은 개발사에서 제공하는 docs를 참조하게 됩니다. 물론 vue-chartjs도 해당 가이드를 제공합니다.
해당 Getting Started를 통해서 참조하여 개발을 수행하면, 해당 Error가 발생하는데... 우선 내용만 분석을 해보면 prop로 전달하는 chartData가 Object를 원하지만 Null이 들어왔다는 내용입니다.
그렇다면, component를 통해서 prop를 전달하는 부분을 우선 살펴보겠습니다.
<doughnut-chart :chart-data="doughnutCollection1" :options="doughnutOptions1" style="height: 330px;"></doughnut-chart>예를들어... 위와 같이 doughnut chart를 그린다고 했을때, prop로 :chart-data로 parent component의 data중에서 doughnutCollection1의 값을 전달합니다.
그렇다면, doughnutCollection1를 살펴봐야겠죠??
data() {
return {
doughnutCollection1: null,
};
},해당 부분은 Getting Started에 가이드 되어 있는 내용입니다. 하지만 Error의 문구를 본다면... Null을 받았다고 하니 이게 문제일 가능성이 높습니다. 그럼 어떻게 바꾸어야 할까요??
실제로 chart를 그리기 위해서 data를 주입하는 부분은 methods에서 axios.get등을 통해서 유효한 값을 구해온 다음에 dataCollection에 넣고 :chart-data로 전달하게 됩니다. 따라서, 해당 부분과 동일하지만 비어있는 object로 구현하면 되는 것 이지요.
[수정코드]
data() {
return {
doughnutCollection1: {},
};
},이제 Error는 발생하지 않습니다. 실질적으로 vue-chartjs가 동작하는 로직은 아래와 같습니다.
- Created 단계에서 data는 먼저 생성이 되기 때문에, doughnutCollection에는 null이 할당됩니다.
- 이후 Mounted 단계가 되면 바로 현재 data를 기준으로 template의 chart component를 호출하면서 null props를 전달하게 됩니다.
- 실질적으로 doughnutCollection에 값을 넣어주는 methods는 이후에 돌고, AT-Back의 결과를 기다리기 때문에 시차가 발생하게 되고, doughnutCollection 값의 변경이 생기면, mixins을 통해서 바로 chart component에 전달되고 값이 들어있는 chart가 그려지게 됩니다.
따라서 lifecyle에 따른 그리고 서버통신에 따른 시차로 data에 설정된 초기값이 전달되었다가 원하는 값으로 chart가 그려지게 되는 것 입니다. 따라서 null대신에 { }로 설정하게되면 비어있는 object로 인식하여 Error가 발생하지 않는 것 이지요~
- Ayotera Lab -
댓글