새 데이터가 바인딩되기 전에 Vue Watcher가 실행 되었습니까?

Question

이 코드 사용하고 있습니다 :

var vueApp = new Vue({ 
    el: '#app', 
    data: { 
     modalKanji: {} 
    }, 
    methods: { 
     showModalKanji(character) { 
      sendAjax('GET', '/api/Dictionary/GetKanji?character=' + character, function (res) { vueApp.modalKanji = JSON.parse(res); }); 
     } 
    }, 
    watch: { 
     'modalKanji': function (newData) { 
      setTimeout(function() { 
       uglipop({ 
        class: 'modalKanji', //styling class for Modal 
        source: 'div', 
        content: 'divModalKanji' 
       }); 
      }, 1000); 
     } 
    } 
}); 

를 내가 클릭했을 때, 내부의 한자 데이터를 팝업 표시하도록하는 요소가 있습니다

<span @click="showModalKanji(kebChar)" style="cursor:pointer;> 
    {{kebChar}} 
</span> 

<div id="divModalKanji" style='display:none;'> 
    <div v-if="typeof(modalKanji.Result) !== 'undefined'"> 
     {{ modalKanji.Result.literal }} 
    </div> 
</div> 

그것은 작동을하지만, 함께 사용하는 경우에만 setTimeout delay를 사용하여 "Vue가 모델을 업데이트 할 시간을줍니다."... setTimeout을 제거하면 watch 함수에서 코드가 즉시 호출되므로 팝업 데이터는 항상 "1 반복"뒤에 표시됩니다. 이전 한자를 클릭했습니다 ...

Vue가 완료된 후 watcher 함수를 호출하여 새 데이터와 바인딩하는 방법이 있습니까?

Answer 1

나는, 당신이 nextTick 필요하다고 생각 Async-Update-Queue

watch: { 
    'modalKanji': function (newData) { 
     this.$nextTick(function() { 
      uglipop({ 
       class: 'modalKanji', //styling class for Modal 
       source: 'div', 
       content: 'divModalKanji' 
      }); 
     }); 
    } 
} 

참조