[VUE] compulsion rerendering (강제 렌더링 하기)

VUE로 개발을 하는 프로젝트를 하던 와중 data의 값은 바뀌었는데 HighChart Compnent에 데이터가 렌더링 되지 않는 문제가 발생해  해결방법을 찾게되어 포스팅 하게 되었다.

 

찾아보니 종종 발생하는 문제라고 한다. 나의 경우는 배경과 그 위에 그려지는 차트간의 시점 차이로 인해(퍼블이 vue가 아닌 jquery 중심의 코드로 작성되어 발생하는 문제이다) 발생했다.

 

해결방법로 component에 key를 이용해 해당 component를 forceUpdata 해주었다.

 

<template>
    <client-only>
        <highcharts :options="chartOptions_1" :key="chartOptionsKey"></highcharts>
    </client-only>
</template>
<script>
export default {
    data() {
        return {
            chartOptions_1: {},
            chartOptionsKey: 0
        }
    },
    created() {
        this.setChartOptions_1();
    },
    methods: {
        setChartOptions_1() {
            this.chartOptions_1.series = [
            {
                name: "data1",
                y: 10
            }, 
            {
                name: "data2",
                y: 20
            },
            {
                name: "data3",
                y: 30
            }
        ]
        //key값을 변경한다.
        this.chartOptionsKey += 1
    }
}
</script>

 

위의 코드처럼 component에 key를 잡아주고 데이터를 수정했을때 key값을 수정해 주면 component가 새로 그러진다.