[Vue] 처음 초기화 할때(init) 제대로 안보여주는 경우 (v-progress-bar)

상황 :

처음 init 할때 초기화가 제대로 안됐다. init함수를 호출하는데, 함수 결과값이 늦게 나와서, 계속해서 업데이트가 안됐다.

 

해결방법 : 

Vuetify를 쓰는 경우는 v-progress-bar를 사용해보자.

 

로딩이 다 됐는지 확인하는 변수 loading을 False로 선언하고,

init을 시작할때 True로 바꿔주고 끝날때 False로 바꾸자.

 

그리고 v-progress-bar에 v-if="loading"을 걸어주면,

init이 다될때까지 로딩바가 돌아가고, 완벽하게 로딩이 되면 제대로 된 값을 보여준다.

 

예시 : 

    <v-progress-linear v-if="loading" indeterminate />
    <div v-else> //여기는 이제 제대로 됐을경우 나올 코드를 아래써주면 됨

async mounted() { //init 호출
    try {
      await this.init(query)
    } catch (e) {
      this.error = true
      console.error(e)
    }
  },

async init() { // init 예시
    this.loading = true
    await this.fetchReviewDetail()
    this.loading = false
},

 

참고 

https://vuetifyjs.com/en/api/v-progress-linear/

Vuetify — A Material Design Framework for Vue.js