Can't delay using data in Vue for after getting value from database-CodePudding

I need to compare string that I get from firebase in document.check1 with some strings (written hard in function below) and show Content. I know how to call it out in button but I want to check it right after entering the page - not after clicking. When I try to do it - I get error that it has no value. How can I make it "wait" for the data to collect automaticaly?

 <template>
         <router-link to="/konto">Back</router-link>
         <div v-if="document">        
           <div>
             <span>1:</span>
             {{ document.check1 }},
             <span>2:</span>
             {{ document.check2 }},
             <span>3:</span>
             {{ document.check3.length }}
           </div>
         </div>
         <button v-if="itWorkOk" @click="documentCheck">Show Content after finding result</button>
          <div v-if="isOther">
           <p>Content</p>
         </div>
 </template>
 
 <script>
 import getUser from "../composables/getUser";
 import getDocument from "../composables/getDocument";
 import { ref } from "@vue/reactivity";
 
 export default {
   props: ["id", "document"],
   setup(props) {
     const { error, document } = getDocument("AllData", props.id);
     const { user } = getUser();
 
     const itWorkOk = ref(true);
     const result1 = ref("");
     const isOther = ref("");
 
     const documentCheck = async () => {
       const isItOk = document.value.check1
       if (isItOk == "Result One") {
         result1.value = true;
         itWorkOk.value = false;
       } else {
         isOther.value = true; 
         itWorkOk.value = false; 
       }
     };
 
     return {
       error, user, document, documentCheck, result1, isOther, itWorkOk,
     };
   },
 };
 </script>

The error (when I put function to call immediately):

Uncaught (in promise) TypeError: document.value is null

The getDocument code:

import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'

const getDocument = (collection, id) => {

  const document = ref(null)
  const error = ref(null)

  let documentRef = projectFirestore.collection(collection).doc(id)

  const unsub = documentRef.onSnapshot(doc => {
    if(doc.data()) {
        document.value = {...doc.data(), id: doc.id}
        error.value = null
    } else {
        error.value = "Document does not exist"
    }
    
  }, err => {
    console.log(err.message)
    error.value = 'Couldn't get the document'
  })

  watchEffect((onInvalidate) => {
    onInvalidate(() => unsub());
  });

  return { error, document }
}

export default getDocument

CodePudding user response：

If I correctly understand your question, you need to fetch the Firestore data in one of the lifecycle hooks before the component is mounted, for example created or mounted.

In the lifecycle hook, you asynchronously read the data from Firestore and compare the result to the desired values.

CodePudding user response：

I used setTimeout(function () { methotToCall(); }, 1000); thanks to this thread - stackoverflow.com/questions/24849/… and it "worked" so I'm gonna close this one. I'm sure this is not the right method, but it will work for a time. Thank's for help :)