vue Toast Viewer에 data가 안 넘어간다.(+해결)

라우터 params로 넘어오는 id를 이용해 firestore에서 도큐먼트를 읽어온 후, 

template 태그 안의 변수들에 값을 넣고 ToastViewer 컴포넌트에도 데이터를 넘기려 했으나 계속해서 ToastViewer props에서는 데이터를 읽어오지 못했다. 

 

<template>
<div class="container">
<h1>{{ title }}</h1>
  <h3>{{ dt }}</h3>
  <TuiViewer :content="content" />
</div>

</template>

<script>
import TuiViewer from "./Editor/ToastViewer.vue";
import {getDocument} from "../firestore.js"
export default {
  components: {
    TuiViewer,
  },
  data(){
      return{
          title: '',
          dt: '',
          content: '',
      }
  },
 async mounted() {
    const id = this.$route.params.id;
    console.log("id : ", id);
    const docSnapshot = await getDocument("notice", id);
    if (docSnapshot.exists()) {
      console.log("Document data:", docSnapshot.data());
      const data = docSnapshot.data()
      this.title = data.title
      this.dt = new Date(data.createDt).toLocaleString()
      this.content = data.content
      console.log(this.content)
    } else {
      // docSnap.data() will be undefined in this case
      console.log("No such document!");
    }
  },
};

 

알고보니 firestore를 이용해서 데이터를 가져올때는 어쨌든 시간이 걸리기 마련이고, 결과값을 받아와서 data를 채우기 전에 

TuiViewer :content="content"에 값이 붙어버려 아무 값이 없는 content가 컴포넌트로 넘어갔던것이다. 

 

 

<div v-if="loading">Loading...</div>
   <div v-else>
     <h1>{{ title }}</h1>
     <h3>{{ dt }}</h3>
     <TuiViewer :content="content" />
	</div>

 

위와 같이 loading이라는 변수에 조건을 줘서 처음에는 <div v-else> 값 자체가 붙지 못하게 해놓고, 

firestore에서 값을 다 읽어오면 loading값을 false로 변환하고 그때서야 컴포넌트가 붙게 되므로 정상적인 값을 전달할 수 있게된다.