Vue - $nextTick

Vue에서 데이터와 UI를 건드려야 하는 상황에

DOM을 못 찾는 상황이 생긴다.

 

데이터를 통해 만들어진 DOM이 완성되기 전 호출을 하려고 하는 상황인데

어떤 데이터를 vue._data에 삽입하자마자 삽입 후 갱신 될 DOM을 찾아 처리하려고 하면

DOM을 찾지 못한다는 에러 문구만 나올 뿐이다.

 

모든 데이터처리가 비동기로 처리되는 Javascript의 특성 때문에 DOM이 갱신되기 전 탐색하는 상황이 나오게된다.

 

 

오류 예제

<div id="app">
    <div v-for="item in list">
        <div v-bind:id="bindId(item)"></div>    <!-- 2 -->
    </div>
</div>
 
<script>
new Vue({
    el: '#app',
    data: function() {
        return {
            list: []
        };
    },
    created: function() {
        var self = this;
 
        for(var i=0; i<100; i++) {
            this._data.list.push(i);    // 1
        }
 
        var dom = document.getElementById('item-0');    // 4
        dom.style.backgroundColor = 'red';                // 5
    },
    methods: {
        bindId: function(item) {
            return 'item-' + item;    // 3
        }
    }
})
</script>

$nextTick

 

created: function() {
 
    // ...
 
    this.$nextTick(function() {
        var dom = document.getElementById('item-0');
        dom.style.backgroundColor = 'red';
    });
}

 

nextTick으로 감싼뒤 callback을 통해 DOM을 조작하게 되면 

Vue.js에서 데이터갱신 후 UI까지 완료한 뒤에 nextTick에 있는 함수를 최종적으로 수행하게 된다.

 

참고문서 : https://kr.vuejs.org/v2/api/#Vue-nextTick

 

 

 

참고 출처 : http://vuejs.kr/jekyll/update/2017/01/19/vuejs-nexttick-example/

 

사용 방식

      this.$nextTick( ()=>{
        let parentEl = this.$el.querySelector('#cat-'+this.catDetailInfo.parent);
        if(this.getAttrNumber(parentEl,'level') !== 1){
          let bool = true;
          while (bool) {
            if( this.getAttrNumber(parentEl,'level') == 2){
              parentEl = this.$el.querySelector('#'+parentEl.id);
              this.accordionEvent(parentEl, 'dropDown');
              bool = false;
            }else{
              parentEl = this.$el.querySelector('#cat-'+this.getAttrNumber(parentEl,'parent'));
            }
          }
        }
      });