Vue Watcher ausgeführt, bevor die neuen Daten gebunden sind?

Question

Ich verwende diesen Code:

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); 
     } 
    } 
}); 

und ich habe ein Element, das beim Anklicken auf, zeigt ein Popup mit den Kanji-Daten innen:

<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> 

Es funktioniert, aber wenn nur mit einem verwendet setTimeout Verzögerung, um "die Zeit für Vue zu erlauben, sein Modell zu aktualisieren" ... Wenn ich das setTimeout entferne, so dass der Code sofort in der Watch-Funktion aufgerufen wird, sind die Popup-Daten immer "1 Iteration hinter", es werden die Informationen der vorheriges Kanji Ich habe geklickt ...

Gibt es eine Möglichkeit, dass eine Watcher-Funktion NACH dem Abschluss von VUE mit den neuen Daten verbunden wird?

Answer 1

Ich glaube, Sie brauchen nextTick finden Async-Update-Queue

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