vue3 object deep reactivity works fine but getting error

Question

I am using composition api fetching data with firestore, the render view works fine but the console got some errors and the vue-router couldn't work correctly, maybe is the reason of vue deep reactivity. Here is my setup function.

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,
};

and the template goes like this

<span class="text-lg font-semibold ml-2">
   {{ state.article.author.name }}
</span>

Here is the error I got and the console goes with : 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.

why isn't it reactive? I hope someone can help me out here. Much appreciated in advance.

wuguichiroumeiyou wuguichiroumeiyou · Accepted Answer · 2021-09-02T08:11:09

the initial value of state is {}
when it renders your state.article.author.name, it will throw an error.
to fix it, you can add a judgement in your tempalte

<span class="text-lg font-semibold ml-2">
   {{ state.article && state.article.author.name }}
</span>

vue3 object deep reactivity works fine but getting error

1 Answers