2016-10-16 5 views
2

2.기본 vue.js 2 VUE-자원 HTTP 변수 할당에 얻을 정말 vue.js에서 일하기 가장 기본적인 REST 기능을 얻기 위해 사투를 벌인거야

나는 약간의 데이터를 좀하고 싶습니다

끝내고 내 반환 값을 내 Vue 인스턴스의 변수에 할당합니다. 여기까지 내가 얼마나 멀리 있는지.

var link = 'https://jsonplaceholder.typicode.com/users'; 
var users; 

Vue.http.get(link).then(function(response){ 
    users = response.data; 
}, function(error){ 
    console.log(error.statusText); 
}); 

new Vue ({ 
    el: '#user-list', 
    data: { 
     list: users 
    } 
}); 

약속 안에는 응답 데이터에 액세스 할 수 있지만 사용자 나 Vue 인스턴스의 데이터에 할당 할 수는 없습니다.

필자는 말할 것도없이 vue.js에 완전히 익숙하지 않으며 도움을 주셔서 감사합니다.

스택 : VUE-자원, 2.03 1.0.3

건배를 vue.js!

답변

9

당신은 객체를 생성하고 그 같은 VUE 인스턴스에 전달할 수 있습니다

var link = 'https://jsonplaceholder.typicode.com/users'; 
var data = { 
    list: null 
}; 

Vue.http.get(link).then(function(response){ 
    data.list = response.data; 
}, function(error){ 
    console.log(error.statusText); 
}); 

new Vue ({ 
    el: '#app', 
    data: data 
}); 

아니면 방법이 객체에서 함수를 만든 다음 마운트 된 함수에서 호출 할 수 있습니다 :

var link = 'https://jsonplaceholder.typicode.com/users'; 
new Vue ({ 
    el: '#app', 
    data: { 
     list: null 
    }, 
    methods:{ 
     getUsers: function(){ 
      this.$http.get(link).then(function(response){ 
       this.list = response.data; 
      }, function(error){ 
       console.log(error.statusText); 
      }); 
     } 
    }, 
    mounted: function() { 
     this.getUsers(); 
    } 
}); 
+1

답변 해 주셔서 감사합니다. 완벽하게 작동합니다. 그러나이 행동 뒤에있는 이유는 무엇입니까? –

+0

[http://vuejs.org/api/#data](http://vuejs.org/api/#data) 희망 사항을 확인하십시오. –