如何解决如何在执行异步承诺功能的同时更新 Chrome 中的 Vue-Devtools 道具
当我在 Vue 3 中修改一个对象的 prop 时（我知道，不要直接修改 props，这里它只能工作，因为它是通过引用传递的，因为它是一个对象），它也在 Vue Dev 中更新- 很棒的工具。
如果我发送多个 axios 调用，在那里我解决了一些承诺，则该 prop 不会在 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);
})
解决方法
您必须使用 $set 助手：
this.$set(this.translation,Object.keys(response.data)[0],response.data[Object.keys(response.data)[0]]);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
