I am currently using the composition API to fetch data from Firestore. While the render view is working fine, I am encountering some errors in the console and facing issues with Vue Router functionality. This might be due to deep reactivity in Vue. Here is how my setup function looks:
setup() {
const route = useRoute();
const state = reactive({});
const getData = async () => {
const snapshot = await articlesCollection
.doc(auth.currentUser.uid + "/userArticles/" + route.params.aID)
.get();
state.article = snapshot.data();
console.log(state.article);
};
getData();
return {
state,
};
The template code is as follows:
<span class="text-lg font-semibold ml-2">
{{ state.article.author.name }}
</span>
When running this code, I encountered the following error message: Uncaught (in promise) TypeError: Cannot read property 'author' of undefined
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
I'm puzzled as to why it isn't reacting as expected. Any assistance would be greatly appreciated.