Vue JS AJAX 계산 된 속성

Question

좋아, 나는 내가 처음으로 작업 한 Vue JS 응용 프로그램을 사용하는 데 매우 가깝다고 생각하지만, 약간의 걸림돌을 겪은 후에도 계속 걸림을 계속합니다. 나는 이것이 마지막 작은 걸림쇠가되기를 바랍니다. vue-async-computed 및 axios를 사용하여 API에서 고객 개체를 가져옵니다.

그런 다음이 속성을 하위 구성 요소에 전달하고 {{customer.fName}}과 같은 화면으로 렌더링합니다.

Ajax 호출이 만들어지고 응답이 다시 오는 것으로 예상됩니다. 문제는 페이지에 아무 것도 없기 때문에 고객 객체가 아약스 호출 이후에 업데이트되지 않는 것 같습니다. 여기

는 것을, 나는

http://pastebin.com/DJH9pAtU

구성 요소는 "고객"이라는 계산 된 속성을 가지고 있으며, 내가 말했듯이, 내가 네트워크 탭에서 볼 수있는 중이 야 프로필 페이지 .vue 파일 요청이 이루어지고 오류가 없습니다. 응답은 여기에 아이 컴퍼넌트에 전송되는 : 해당 구성 요소 내에서

<app-customerInfo :customer="customer"></app-customerInfo> 

내가 페이지에 데이터를 렌더링하고 있습니다 :

{{customer.fName}} 

그러나이 페이지가 어떤 결과를 보여줍니다. 검사관의 "고객"속성 값을 확인할 수있는 방법이 있습니까? 내가 놓친 게 분명해?

Answer 1

저는 Vue를 약 1 년 반 동안 사용 해왔고, 비동기 데이터로드와 좋은 물건을 다루는 투쟁을 깨닫습니다. 여기에 내가 구성 요소 설정 할 방법은 다음과 같습니다 구성 요소가 mounted를 얻을 때 다음, 내가 한 그래서

<script> 
export default { 

    components: { 
     // your components were fine 
    }, 

    data: function() { 
     return { 
     customer: {}, 
     } 
    }, 

    mounted: function() { 
     this.axios.get('/api/customer/get/' + this.$route.params.id) 
      .then(function(response){ 
      this.customer = response.data; 
      }.bind(this)); 
    } 
} 
</script> 

이 구성 요소에 대한 데이터 기능에 customer를 초기화했다가 서버에 axios 전화를 보냅니다. 해당 호출이 반환되면 this.customer을 데이터로 설정하십시오. 그리고 위의 내 의견에서 분명히 말한 것처럼 Vue's devtools을 확인하면 변수 및 이벤트를 쉽게 추적 할 수 있습니다.

Answer 2

귀하의 오류는 이름 지정과 관련이 있다고 생각합니다. vue-async-computed 플러그인에는 Vue 객체의 새 속성이 필요합니다. 또한, 비동기 함수는 Promise를 반환해야하지만 잘못 될 수 있다고 생각합니다.

computed: { 
       customer: async function() { 
        this.axios.get('/api/customer/get/' + this.$route.params.id) 
        .then(function(response){ 
         return(response.data); 
        }); 
       } 
      } 

는해야 다음 vue.js 크롬 개발 도구 밖으로

asyncComputed: { 
       return customer: async function() { 
        this.axios.get('/api/customer/get/' + this.$route.params.id) 
        .then(function(response){ 
         return(response.data); 
        }); 
       } 
      }