如何在完成异步承诺函数的同时更新Chrome中的Vue-Devtools道具

Question

当我在Vue 3中变异一个道具时，它是一个对象(我知道，不要直接修改道具，这里只因为它是一个对象而通过引用传递)，它也会在Vue Dev工具中更新，这是很棒的。

如果我发送多个axios调用，其中我解析了一些承诺，那么这个支柱不会在Vue Dev-Tools中更新，但是如果我console.log它:我看到了所有的新数据。

因此，问题是:如何在解析异步承诺之后更新Vue Dev-Tools？当道具不同步时，很难调试这些东西。

export default {
  props: {
    translation: Object
  },
}

// [...]

// Vue Devtools update the prop translation
this.translation["test"] = { source: "source", target: "target" }

// I do a async call/promise with axios
Promise.all(promises)
.then((responses) => {
    responses.forEach((response) => {
        this.translation[Object.keys(response.data)[0]] =
            response.data[Object.keys(response.data)[0]];
    });
})
.then(() => {
    console.log("-------------------");
    console.log("After: Promise.all:");
    // I see that this.translation has mutated, but NOT in Vue-Devtools
    console.log(this.translation);
})

Answer 1

您必须使用$set助手：

this.$set(this.translation, Object.keys(response.data)[0], response.data[Object.keys(response.data)[0]]);

https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects

https://v2.vuejs.org/v2/api/#Vue-set