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 延迟一起使用以“让 Vue 有时间更新其模型”...如果我删除 setTimeout 以便在 watch 函数中立即调用代码，弹出数据始终为“1 次迭代后面”，它显示了我点击的上一个汉字的信息......

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

Answer 1

我认为您需要nextTick ，请参阅Async-Update-Queue

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