vue의 비동기식 소품

vue의 비동기식 소품

나는 비동기식 전화를 거는 방법이 있다.

methods: {

        getPercentCovered() {
          this.getPercentageCompletedBySubject(1).then((percent) => {
          return percent;
        });
},

그것은 아약스 요청에 의해 반환된 값에서 백분율을 계산한다.

내가 생각하는 문제는 지연이다.

<progress-bar :percent="getPercentCovered()"></progress-bar>

그 값은 소품을 렌더링하기 전에는 절대 전달되지 않는다.주변에 일이 있나?

문제는 지연이 아니다.문제는 이다getPercentCovered()다시는 돌아오지 않다percent: 실제로 돌아온다.undefined너는 할 수 없다.return비동기적 운영의 결과: 그러한 시나리오에서 당신이 할 수 있는 가장 큰 것은 약속 전체를 돌려주고 그것을 아이에게서 처리하는 것이다.

이 유명한 대답은 당신의 코드의 일반적인 문제를 강조한다.

자, 당신의 질문의 Vue 부분에 대해서, 이것을 다룰 수 있는 몇 가지 방법이 있다.내 생각에 가장 간단한 것은 어린이에게 소품을 전달하고 그 소품은 어린이에게 업데이트되면 업데이트되는 것 같다.getPercentageCompletedBySubject결심하다내가 전화할께.created()라이프사이클 훅실제 사용 사례에 따라 다른 이벤트 핸들러로 이동하십시오.

//script
data() {
  return {
    percent: '', //or maybe null or whatever empty value.
  };
},
methods: {
        getPercentCovered() {
          this.getPercentageCompletedBySubject(1).then((percent) => {
          this.percent = percent; //instead of return from a handler, which does nothing ,
          // now we assign to this.percent
        });
},
created(){
  this.getPercentCovered();
}

//template
<progress-bar :percent="percent"></progress-bar>

참조URL: https://stackoverflow.com/questions/51750066/asynchronous-props-in-vue