如何在执行异步承诺功能时更新 Chrome 中的 Vue-Devtools 道具

Question

当我在 Vue 3 中改变一个 prop 时，它是一个对象（我知道，不要直接改变 props，这里它只起作用，因为它是一个对象，它是通过引用传递的），它也在Vue 开发工具很棒。

如果我发送多个 axios 调用，我解决了一些承诺，则该道具不会在 Vue 开发工具中更新，但如果我 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://vuejs.org/v2/guide/reactivity.html#For-Objects

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

如何在执行异步承诺功能时更新 Chrome 中的 Vue-Devtools 道具

How to update Vue-Devtools props in Chrome while doing async promise functions

javascript

vue.js

vue-devtools