javascript - Vue watcher 在绑定(bind)新数据之前执行？

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 延迟一起使用时才能“让 Vue 有时间更新其模型”...如果我删除 setTimeout，那么代码在监视函数中被瞬时调用，弹出数据总是“落后1次迭代”，它显示了我点击的前一个汉字的信息......

有没有办法在 Vue 完成与新数据的绑定(bind)后调用观察者函数？

Answer 1

我想你需要nextTick，见Async-Update-Queue

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