문제 발생
details 태그를 이용하여 radar 차트가 그려지는 공통 컴포넌트를 제작하였다. 처음에 표시되는 컴포넌트를 클릭하면 제대로 차트가 표시되는 데, 그 이후에 두번째로 오는 컴포넌트를 클릭하면 아무 차트도 안 그려지는 문제가 발생하였다.
문제 해결
이유를 분석해보다가 살펴보니 id 이름을 통해서 canvas를 조작하고 있었기 때문이었다. 공통컴포넌트다 보니 아무래도 처음 id만 찾을 수 있었기 때문에 나머지 id를 확인을 못하고 있었다. 그리고 애초에 id는 중복으로 적용이 불가능하기 때문에 발생되는 문제였다.
const ctx = document.getElementById('chart') as HTMLCanvasElement;
그래서 이 문제를 해결하고자, id를 고정이 아닌 매번 새로운 id를 만들어서 그 id를 가지고 인식할 수 있게 하니 서로의 id가 안 겹쳐서 canvas에 chart가 안 그려지는 문제를 해결할 수 있었다.
//chartid를 맨처음 랜덤으로 설정을 해놓는다.
const chartId = ref('chart-' + Math.random().toString(36).substring(2, 9));
//html로 id를 chartId로 변경한다.
<div style="width: 27.2rem"><canvas :id="chartId"></canvas></div>
//랜덤으로 설정한 chhartId를 찾는다.
const ctx = document.getElementById(chartId.value) as HTMLCanvasElement;
'트러블 슈팅 > Vue' 카테고리의 다른 글
LightHouse Syntax not understood error (0) | 2024.08.06 |
---|---|
[JavaScript, Vue]details/summary 태그 toggle 기능 막기 (0) | 2024.06.12 |
[vue3+TypeScript] Swiper의 type을 지정해주자. (0) | 2024.05.03 |