약속에서 템플릿의 값을 업데이트합니다.

Question

저는 VueJS를 처음 접했고 설명서가 부족하다는 것을 알았지 만, 기본값을 0으로 설정하는 구성 요소로 작업하려고했지만 약속이 반환되면 value이 뷰를 업데이트하고 싶습니다.

Vue.component('commentsCount', { 
    template: ` 
     <strong class="t-bold">{{count}}</strong> 
    `, 
    data:() => ({ count: 0 }), 
    created:() => { 
     this.count = Review.stats(productCode) 
     .then((res) => { 
      console.log(res.count); 
      return res.count; 
     }); 
     console.log(this); 
    }, 
    }); 

내가 잘못하고있는 것이 확실하지 않지만 다음 오류가 발생하며 지난 한 시간 동안 그 문제를 해결했습니다.

[Vue warn]: Error in created hook: "TypeError: Cannot set property 'count' of undefined"

found in

--->

및 라인 this.count = Review.stats(productCode)

TypeError: Cannot set property 'count' of undefined

Answer 1

당신은 .then 콜백의 값을 설정해야합니다에이 오류. created (및 다른 방법)에 화살표 기능을 사용하지 마십시오. this의 컨텍스트가 손실됩니다. 이 시도 : 나는`this.count = res.count`> catch되지 않은 (약속의) 형식 오류에 다음과 같은 오류가

Vue.component('commentsCount', { 
    template: ` 
    <strong class="t-bold">{{count}}</strong> 
    `, 
    data:() => ({ count: 0 }), 
    created() { // can't be an arrow function 
    Review.stats(productCode) 
     .then((res) => { 
     console.log(res.count); 
     this.count = res.count; // set count here 
     }); 
    console.log(this); 
    }, 
});