[vue3] radar chart를 제작한 공통 컴포넌트 표시되지 않는 문 (feat:chart.js 이용)

문제 발생

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;