부모로부터 아약스 호출로 vuejs 구성 요소를 업데이트하십시오.

Question

VueJs 입문. 어떻게/어디서 다음 Vue 테이블을 채우려면 데이터를 동적으로 끌어 오기 Ajax 호출을 만들 것이라고 궁금하네요?

https://jsfiddle.net/chrisvfritz/aomd3y9n/

: 여기에서 아약스 조각을 통합하기 위해 노력하고있어

var demo = new Vue({ 
    el: '#demo', 
    data: { 
    searchQuery: '', 
    gridColumns: ['name', 'power'], 
    gridData: [] 
    }, 
    methods: { 
    fetchUsers: function() { 
     ... 
     // ajax call using axiom, fetches data into gridData like this: 
     axios.get('http://localhost/url') 
     .then(function(response) { 
      this.gridData = response.data; 
     }) 
     .catch(function(error) { console.log("error"); }) 
     ... 
    } 
    }, 
    created: function() { 
    this.fetchUsers(); 
    } 
}) 

을 다음과 같이 위의

https://jsfiddle.net/yyx990803/xkkbfL3L/?utm_source=website&utm_medium=embed&utm_campaign=xkkbfL3L

나는 (대략)의 예를 수정 한 아약스 호출을 통해 데이터를 가져 오는 fetchUser 메서드를 추가했습니다. 필자는 데이터를 가져와 fetch와 axiom을 사용하여 콘솔에 출력 할 수 있으므로이 부분이 작동한다는 것을 알고 있습니다.

그러나 내 데이터는 표시되거나 업데이트되지 않습니다. 표가 비어 있습니다. Vue 모델 객체 (데모)에는 메서드 자체를 만드는 것이 아니라 구성 요소 자체에 대한 방법을 넣는 것과 관련이 있다고 생각합니다. 그러나 예를 들어 부모로부터 데이터를 전달할 때이를 해결하기 위해 예제를 수정하는 방법을 잘 모르겠습니다.

누군가가 안내를 해줄 수 있습니까?

Answer 1

당신의 문제는 바로 여기입니다 : 당신의 익명 함수 내에서

.then(function(response) { 
    this.gridData = response.data; 
}) 

내에서 당신은 당신이 기대하는 상황이 없습니다. 가장 간단한 해결책은 .bind (this)을 메서드에 추가하는 것입니다.

.then(function(response) { 
    this.gridData = response.data; 
}.bind(this)) 

메서드 본문을 추가하면 외부 컨텍스트를 인식하고 구성 요소 데이터에 액세스 할 수 있습니다.