티스토리 뷰

개발/Vue.js

Vue.js nextTick 활용하기

Jaeyeon Baek 2018.04.03 08:11

화면에서 select box 가 선택될 때 클릭 이벤트를 받고 이때 v-model 값을 통해 무언가를 해야하는 경우가 생겼다. 심플하게는 아래와 같은 코드 모양새가 되겠다.

<b-form-select v-model="selected" :options="options" @change="Changed"/>
{{ type }} 

Changed 함수를 살펴보면 다음과 같다.

Changed()
{
    if ( this.selected == "pig" )
         this.type = "animal";
    if ( this.selectd == "apple" )
         this.type = "fruit";
}

코드상으로 의도는 select box 에서 pig 를 선택하는 경우 화면에 piganimal 이라고 표현하려고 한다. 혹은 apple 를 선택하면 fruit 로 표기한다. 하지만 놀랍게도(!) 코드는 의도와 반대로 동작한다. 왜냐하면 click 이벤트는 v-model 값이 변경되기 전에 호출되고, 호출이 끝나고 나서야 v-model 값이 변경되기 때문이다. 다시말해 select boxpig 가 선택되어 있는 상태에서 apple 로 변경하려고 할 때 아직 pig 인 상태에서 click 이벤트가 다 끝나게 되고 그 후에 v-modelapple 로 변경된다.

그렇다면 어떻게 이 문제를 해결할 수 있을까? 여러가지 방법이 있겠지만 여기서는 nextTick 을 활용해본다.

Changed()
{
    Vue.nextTick(() =>
    {
        if ( this.selected == "pig" )
             this.type = "animal";
        if ( this.selectd == "apple" )
             this.type = "fruit";
    });
}

위와 같은 코드로 깔끔하게 원하는 결과물이 얻어지는 내용에 대해서는 공식문서에 아래와 같이 나와있다. 

https://kr.vuejs.org/v2/guide/reactivity.html#비동기-갱신-큐

Vue.js 가 데이터 변경 후 DOM 업데이트를 마칠 때까지 기다리려면 데이터가 변경된 직후에 Vue.nextTick (콜백)을 사용할 수 있습니다. 콜백은 DOM 이 업데이트 된 후에 호출됩니다.


스터디를 진행하면서는 보이지 않았던 것들이 실제 업무로 감싸지니까 하나씩 퍼즐이 맞춰진다. 다양한 메소드와 훅에 대해서 더 심도 있게 다가서야 Vue 를 뷰스럽게 쓸 수 있겠다.

'개발 > Vue.js' 카테고리의 다른 글

Vue.js 설치 및 프로젝트 생성  (0) 2018.11.08
질의응답 QnA 웹 서비스 제작기  (1) 2018.04.03
Vue.js nextTick 활용하기  (0) 2018.04.03
댓글
댓글쓰기 폼