🔒 문제 상황

회사 프로젝트에서 chart.js를 사용하였는데 api로 받아온 어떠한 데이터 값이 console에는 찍히지만 chart 화면에 데이터를 반영하지 않는 문제를 발견했다.
이유는 변화된 데이터의 값을 vue가 인식하지 못하기 때문이라고 한다. 그럴 때는 key를 활용해주면 된다.

🔑 문제 해결

1. 화면단으로 값을 넘겨주는 data()에 key를 생성해준다.

data() {
  	return {
    	componentKey1: 0, 
	}
},

2. template 안에서 사용되는 chart 태그에 :key=”키” 값을 넣어준다.

<BarLine :key="componentKey1"></BarLine>

3. script 안에서 chart에 값을 넘겨주는 method에 key의 값을 변경시켜 vue가 해당 데이터가 변경되었음을 인식하게 해준다.

setChartData() {

/*
    데이터 ~~
*/

  this.componentKey1++
},

📌 TIP

한 화면에서 여러 개의 chart를 사용할 때 key를 구분하여 사용해주는 것이 좋다.

<BarLine :key="componentKey1"></BarLine>
<BarLine :key="componentKey2"></BarLine>
<BarLine :key="componentKey3"></BarLine>