[Vue.js] 변화가 즉시 반영되도록 강제 리렌더링 처리(Component Force Rerendering)

 

[그림 1] vue-slider-component dot-tooltip에 변화가 즉시 반영 안됨

 

vue-slider-component를 이용한 임계치 범위 설정 기능을 구현하였다. 범위 설정은 v-model로 양방향 데이터 바인딩하였고 merge-tooltip은 변경이 즉시 적용되었으나 dot-tooltip는 반영되지 않았다. 그래서 범위 설정에서 keyup이 일어나면 vue-slider-component가 적용된 자식 컴포넌트를 리렌더링하여 변경이 반영되도록 하였다.

 

<vue-slider
      ...
      :key="componentKey"
    >

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

methods: {
    forceRerender() {
      this.componentKey += 1
    }

 

참고한 자료

https://hyeonyeee.tistory.com/97

[Vue] Component Force Rerendering 하기 (강제로 rerender)

 

vue-slider-component

https://www.npmjs.com/package/vue-slider-component

vue-slider-component