javascript - 承诺后Vue重新加载单个元素

Question

我有一个自定义对象，其属性使用自定义 getter，如果尚未获取该值，则返回一个 Promise ，或者如果有，则返回该值。基本上，延迟加载此属性。

Vue 无法自动判断该 getter 何时更改，因为返回的值最初是一个 Promise 对象，然后在获取该值时该 getter 完全返回另一个对象。这是预期的行为，因为它们是指向两个不同对象的指针。

为了解决这个问题，在我的模板中，如果值为 a Promise，我正在尝试：

• 有条件地显示“正在加载...”文本（作品）
• 在元素上设置一个键，以便重新渲染可以有针对性地进行（有效？）
• 添加一个.then以Promise更新密钥（有效）
• 仅重新渲染该元素（不自行更新）

简化的代码如下所示：

//Where data is an array of objects
//Where columns is an array of strings matching to object keys in data objects

<template v-for="(row, i) in data" :key="i">
    <div class="row">
        <template v-for="column in columns" :key="column">
        <div v-if="(row[column] instanceof Promise)" :key="reload(row[column])">Loading...</div>
        <div v-else>{{row[column]}}</div>
    </div>
</template>

---

methods: {
    reload(promise){
        var watchMe = {done: false};
        promise.then(() => {
            console.log("This definitely happens!");
            watchMe.done = true;
        });
        return watchMe;
    }
}

所以我的假设是，当键发生变化时， div 应该重新评估，并且鉴于它不再获得 a Promise，它应该重新正确呈现。

如果我在回调中添加一个this.$forceUpdate，then它会起作用——但它会重新渲染整个组件，而不仅仅是一个元素，这并不理想。这意味着我的对象获取器完全按照预期工作，我并不担心。

这些都没有奏效：

• 我尝试将 watchMe 作为原始值（0，然后在回调中执行 watchMe++）。
• 我尝试在回调中删除 watchMe.done
• 我尝试i从行传入，然后i++在回调中执行以仅刷新行

为什么键的更改不会触发该元素的重新渲染？我如何让它做到这一点？

标签： javascriptvue.jsvuejs3