Javascript 如何在执行异步承诺函数时更新Chrome中的Vue Devtools道具

当我在Vue 3中变异一个道具时，它是一个对象（我知道，不要直接变异道具，在这里它只起作用，因为它是一个对象，所以它是通过引用传递的），它也会在Vue开发工具中更新，这很好

如果我发送了一些多个axios调用，其中我解决了一些承诺，则该道具不会在Vue Dev工具中更新，但是如果我发送了console.log：我会看到所有新数据

因此，问题是：在解决异步承诺后，如何更新Vue开发工具？当道具不同步时，很难调试东西

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

---

您必须使用

$set

帮助程序：

this.$set（this.translation，Object.keys（response.data）[0]，response.data[Object.keys（response.data）[0]]；