마운트된 함수에 정의되지 않은 VueJS 데이터 속성이 반환됨

마운트된 함수에 정의되지 않은 VueJS 데이터 속성이 반환됨

예상대로 데이터를 반환하는 Axios를 사용하여 get 요청을 했습니다만, 마운트된 기능에서 앱의 데이터 속성에 액세스하여 요청 결과를 할당할 수 없습니다.콘솔 로그 대상this.productList돌아온다undefined누가 나를 올바른 방향으로 인도해 줄 수 있나요?

new Vue({
    el: '#products',
    data: function(){
        return{
            test: 'Hello',
            productList: null
        }
    },
    mounted: function(){
        axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response){
            console.log(response.data);
            console.log(this.productList)
        }).catch(function(error){
            console.log(error);
        })
    }
    
})

왜냐하면 그 기능에서는thisvue 인스턴스를 참조하지 않습니다.또 다른 의미가 있어요.

값을 유지하는 임시 변수를 만들 수 있습니다.this다음과 같이 외부 함수로 변환합니다.

mounted: function() {

  let $vm = this;

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(response) {
    console.log(response.data);
    console.log($vm.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

또는 다음과 같은 화살표 기능을 사용할 수 있습니다.

mounted: function() {

  axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then((response) => {
    console.log(response.data);
    console.log(this.productList)
  }).catch(function(error) {
    console.log(error);
  })
}

언급URL : https://stackoverflow.com/questions/51929737/vuejs-data-property-returns-undefined-in-mounted-function