setup() 질문

[최재문]

마운트되면 ajax요청을 하고 요청 성공하면 country 라는 배열에 데이터 넣기 + pieChart에다가 데이터 넣기  코드를 짜봤는데요
저렇게 하니까 labels 에는 데이터가 정상적으로 박혀서 차트에 제대로 보입니다.

이런식으로요

 

근데 datasets 안에 data에도 제대로 데이터가 적용되어있는데 차트에 반영되지가 않습니다.
console.log(pieChart.value); 로 보면

이런식으로 data 안에 숫자로 제대로 박혀있어요

근데 왜 차트에는 반영이 안되는걸까요 ref 로 제대로 감싸줬는데 말이죵

차라리 둘 다 오류가뜨면 다른방법을 찾겠는데 labels는 반영이 되고 data는 반영이 안되고.. 어질어질하네요

[최재문]

테스트버튼 만들어서 디버깅해보니까

test 버튼 누르면 labels에 test가 박히니까 차트에도 바로 반영이 됩니다.
근데 datasets 안의 data는 콘솔에는 제대로 55가 push되었지만 차트에 반영되지 않습니다.

[codingapple]

label 바꾸는 코드가 윗줄에 있는데

data를 더 윗줄에서 바꿔봅시다

그럼 data만 보이지않을까요 

그렇다면 ref안에 내용 변경하는게 async 하게 동작해서 그럴 수도 있겠군요

data와 label을 한번에 바꿔보거나 [...어쩌구] 카피를 하지 말아보거나 그런 식으로 실험해봐야할듯요 

[최재문]

data를 더 위에서 바꿔도 똑같습니다.

spread operator 없애고 

pieChart.value.data.datasets[0].data = counter;
pieChart.value.data.labels = name;

이런식으로 해도 결과는 똑같습니다.

정말 희한하네요 왜 labels에는 ref가 제대로 먹고 datasets 안에는 안 먹는건지..

[최재문]

혹시나 해서 backgroundColor 에도 푸시하는걸 test버튼에 적용해서 해봤는데 역시 차트에 반영되지 않습니다

별도로 다른 어레이를 선언하고 안에다가 데이터 넣은다음 datasets: [ 어쩌고 ] 이런식으로 함 해보겠습니다

[최재문]

요렇게 해도 안되네요
1,2,3,4,5 로 지정한 초기값만 제대로 차트에 반영되고, ajax 요청한 데이터는 차트에 반영이 안됩니다
콘솔에는 값이 제대로 뜨고용
차트랑 하루종일 씨름하니까 현기증이 나네요 

[codingapple]

v-if 를 차트 윗 요소로 옮겨보거나

ajax 요청 성공시 강제 재렌더링하거나

아니면 watch 그런걸 써보는것이 어떨까요 

[최재문]

Watch로 데이터 감시하고 데이터 바뀔때마다 재렌더링 되게 하면 되겠네요 해보겠습니다

[최재문]

와씨 그냥 차트 html 에 :key="componentKey" 이런식으로 하고
setup() {
let componentKey = ref(0)

}

그리고 ajax 요청 끝나고 .then() 안에다가
componentKey.value++ 하니까 바로 해결 되네요
컴포넌트 강제로 재렌더링하는거 잘 배웠습니다 :key 활용하면 되겠네요

[글쓴이]

글