When I am mutating a prop in Vue 3, which is an object (I know, don't mutate props directly, here it only works because it's passed by reference because it's an object), it updates also in the Vue Dev-Tools which is great.
If I send some multiple axios calls, where I resolve some promises, the prop doesn't update in the Vue Dev-Tools, but if I console.log it: I see all the new data.
So, the question is: how can I update Vue Dev-Tools after resolving async promises? It's hard to debug things, when the props are not syncing.
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);
})
You must use the $set helper:
this.$set(this.translation, Object.keys(response.data)[0], response.data[Object.keys(response.data)[0]]);