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

Vue观察者在绑定新数据之前执行了吗？

1 个答案: