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

Question

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

Can you show us the getDocument code, please? – Gleb Kostyunin Feb 14 '22 at 14:18 — Gleb Kostyunin, Feb 14 '22 at 14:18
@GlebKostyunin sure, I've updated the post – Adam Grzywacz Feb 14 '22 at 15:56 — Adam Grzywacz, Feb 14 '22 at 15:56

score 0 · Answer 1 · answered Feb 14 '22 at 15:33

0

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.

answered Feb 14 '22 at 15:33

Renaud Tarnec

79,263
10
95
121

Maybe it's one of the options? The result matters. I think there should be some other way to maybe delay function to use/compare this data once it's retrieved. – Adam Grzywacz Feb 14 '22 at 16:00
@AdamGrzywacz Did you try it? – Renaud Tarnec Feb 14 '22 at 17:45
I used setTimeout(documentCheck(), 10000); but I get the same error. Like it's using function at start but only show the result after delay. – Adam Grzywacz Feb 14 '22 at 18:06
Using `setTimeout` is not a good idea IMHO. You should correctly manage the asynchronous character of the Firestore methods. – Renaud Tarnec Feb 14 '22 at 18:08
I would be happy to. Any more specific direction? ^^' – Adam Grzywacz Feb 14 '22 at 18:32
I used setTimeout(function () { methotToCall(); }, 1000); thanks to this thread - https://stackoverflow.com/questions/24849/execute-script-after-specific-delay-using-javascript?rq=1 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 :) – Adam Grzywacz Feb 14 '22 at 18:45

score 0 · Accepted Answer · answered Feb 14 '22 at 18:46

0

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 :)

answered Feb 14 '22 at 18:46

Adam Grzywacz

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 14 '22 at 19:07

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

2 Answers2