新しいデータがバインドされる前にビューウォッチャが実行されましたか？

Question

私はこのコードを使用しています。しかし、一緒に使用する場合にのみ、

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

それは動作します：

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

をし、私がクリックしたときに、内部の漢字データとポップアップが表示されることの要素を持っていますsetTimeout delayを「Vueのモデルを更新する時間を許してください」... setTimeoutを削除すると、時計機能でコードが瞬時に呼び出されるので、ポップアップデータは常に「1反復後ろ」です。以前の漢字をクリックしました...

Vueが完了した後にウォッチャー関数を呼び出す方法はありますか？新しいデータとバインドしていますか？

Answer 1

私はAsync-Update-Queue

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

を参照してください、あなたは nextTickが必要だと思います