URL에서 검색 한 후 Vue2 데이터가 템플릿에서 업데이트되지 않습니다.

Question

Vue.js 버전 2를 사용하여 뷰에서 사용되는 변수를 업데이트하려고합니다.

new Vue({ 
    el: '#products', 

    data: { 
     showProductModal: false, 
     product: {} 

    }, 

    methods: { 

     retrieveProduct(id) { 
     axios.get('/product/'+id).then(function (response) { 
      this.product = response.data; 
      console.log(this.product); 
     }); 
     } 
    } 

유의하시기 바랍니다 : 나와 함께

곰, 나는 다음과 같은 코드가

제품 변수가} {빈 객체로 초기화

• ;
• "retrieveProduto()"메서드는 사용자가 단추를 클릭하면 호출됩니다. 그런 다음 API 호출을 수행하고 약속이 해결 된 후 제품 변수를 업데이트합니다.
• 액시스를 사용하여 http 요청을 만들고 응답 개체를 반환합니다. 여기서 response.data은 반환 된 개체의 콘텐츠입니다.

  {ID에

을 console.log (this.product) 결과 : 1, 이름 : "레몬 케이크"설명 : "전통 레몬 케이크", pic_url ""CATEGORY_ID : 1, ...}

정확하게 예상되는 출력입니다. 그러나 뷰에서 {{product}}을 (를) 호출하면 템플릿이 어떤 식 으로든 업데이트되지 않으며 {}에서 영원히 멈추게됩니다.

양방향 데이터 바인딩이 작동하는지 테스트 한 결과 대답은 '예'입니다. 사실, 모든 것이 완벽하게 작동하고 있습니다. 내가 뭔가 잘못하고 있는거야? promise에서 객체를 검색 한 후에 템플릿이 업데이트되지 않아야합니까?

도움을 주시면 감사하겠습니다. 미리 감사드립니다.

편집 : 나는 변수가 단지 {{제품}}에 대한 테스트 목적입니다 호출하는 템플릿의

• 부분입니다.
• 을 (으)로 호출하는 이유는 내 첫 시도에서 this.product입니다. 이 solution elsewhere을 보았습니다. 그래서 그것을 바꿀 수있었습니다. 그것이 작동하지 않았기 때문에, 나는 다시 전체 뷰 개체를 반환이
• 인쇄 을 console.log (이)를 변경하고, 그것은 속성이 올바르게 설정 제품을 가지고 있지만, 아직 반영되지 템플릿.

Answer 1

범위 지정과 관련된 몇 가지 문제가 있다고 생각합니다.

retrieveProduct(id) { 
    axios.get('/product/' + id).then(response => { 
     this.product = response.data; 
    }); 
    } 

을 그리고 데이터가 제대로 변경되었는지 확인하기 위해 vue-devtools를 사용이 시도 .

Answer 2

선언 또는 범위 지정 문제로 인해 self과 관련된 문제가 발생할 수 있습니다. 대신 다음을 시도하십시오.

retrieveProduct(id) { 
    var this_vue_instance = this; 
    axios.get('/product/'+id).then(function (response) { 
     this_vue_instance.product = response.data; 
     console.log(this_vue_instance.product); 
    }); 
}