$asnyComputed is undefined in computed property when watcher is called first
johannes-z opened this issue · 1 comments
johannes-z commented
AsyncComputed properties are undefined when being used in a computed property, at least in this edge case that I implemented. I made a sandbox repro: https://codesandbox.io/s/m34kn80m9j
After the latest changes, it's still initially undefined
, at least when using watchers. Because of this I can't make computed properties depend on the asyncComputed state, e.g. updating
.
Here is the code (unimportant stuff was truncated):
App.vue
<template>
<div id="app">
Parent: {{ childProp }}
<ChildComponent ref="child" @update:someProp="childProp = $event;" />
</div>
</template>
<script>
import ChildComponent from "./Child.vue";
export default {
components: { ChildComponent },
data() {
return {
childProp: {}
};
}
};
</script>
Child.vue
<template>
<div>
Child: {{ someProp }} {{ $asyncComputed.posts.updating }}
<div v-for="(post, index) in posts" :key="index">{{ post }}</div>
</div>
</template>
<script>
export default {
watch: {
someProp: {
deep: true,
immediate: true,
handler(newVal) {
this.$emit("update:someProp", newVal);
}
}
},
computed: {
someProp() {
console.log(this.$asyncComputed.posts);
return {
prop: "value",
error: this.$asyncComputed.posts.error
};
}
},
asyncComputed: {
posts: {
lazy: true,
default: () => [],
async get() {
return [1, 2];
}
}
}
};
</script>
aekasitt commented
Anything being worked on this issue?