Vue - DOM 업데이트 후 작업하는 함수 $nextTick()

비동기로 데이터를 가져와 테이블을 생성하고 같은 이름끼리 병합하는 함수를 생성하여 사용하였는데 어떻게 된 것인지 data를 변경하고 함수를 사용하였지만 생성한 함수가 제대로 동작하지 않음.

 

원인으로는 data가 변경되었지만 DOM에는 반영되지 않은 상태에서 rowsapn을 변경하려는 동작을하여 제대로 동작을 하지 못하였습니다. 이후 알게 된 것이지만 Vue는 DOM 업데이트를 비동기로 하여 컴포넌트는 즉시 재 렌더링되지 않습니다. 큐가 플러시 될 때 다음 “tick” 에서 업데이트됩니다.

 

해결 방법으로 DOM업데이트후 호출하는 $nextTick() 함수를 사용하여 DOM업데이트를 하고 난 뒤 병합하는 함수를 호출하는 방식으로 처리하였습니다.

 

 

사용방법

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '갱신 안됨'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '갱신됨'
      console.log(this.$el.textContent) // => '갱신 안됨'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '갱신됨'
      })
    }
  }
})

https://kr.vuejs.org/v2/guide/reactivity.html#%EB%B9%84%EB%8F%99%EA%B8%B0-%EA%B0%B1%EC%8B%A0-%ED%81%90

반응형에 대해 깊이 알아보기 — Vue.js