VueJS 공부하기 (2) | vue-resource - $http.get()

firebase를 아주 간단한 하게 활용해서 vue-resource를 아주 간단하게 체험해보기
이 포스팅은 Max의 Vuejs 강좌 내용을 정리한것 입니다.


이번 포스팅에서는 이전 포스트에 이어서 데이타베이스에서 데이타를 가져오는 방법에 대해서 알아 볼 것입니다.

데이타를 저장할 변수 설정

  • 가져올 데이타를 저장하는 변수 추가
    • users: [] 이 부분임
App.vue
1
2
3
4
5
6
7
8
9
data() {
return {
user: {
username: '',
mail: ''
},
users: []
};
},

데이타를 불러오는 메소드 설정

  • 데이타를 호출하는 메소드 추가
    • 첫번째 응답에서 response.json()로 받은 데이타는 promise 객체가 리턴된다.
    • 다시 한번 then을 사용하면 우리가 원하는 데이타 만 가진 객체가 리턴된다.
    • 그 데이타를 다시 한번 써먹을 수 있게 iteration 해주고 위에서 만든 변수에 저장한다.
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
fetchData() {
this.$http
.get('https://your-project.firebaseio.com/data.json')
.then(response => {
return response.json();
})
.then(data => {
const resultArray = [];
for ( let key in data ) {
resultArray.push(data[key]);
}
this.users = resultArray;
});
}

fetchData 메소드를 실행할 버튼과 결과 리스트 만들기

  • 버튼을 클릭 했을 때 fetchData 메소드로 데이타를 호출하는 버튼 생성
  • 호출된 데이타가 users 배열에 저장되고 해당 데이터 결과를 리스트로 출력
App.vue
1
2
3
4
5
6
<button class="btn btn-primary" @click="fetchData">GetData</button>
<br>
<br>
<ul class="list-group">
<li class="list-group-item" v-for="u in users">{{u.username}} - {{u.mail}}</li>
</ul>

공통 url 설정

  • Vue.http.options.root 사용하기
    • url의 반복되는 root 부분을 main.js에 설정해 놓으면 하위 구조에서는 편하게 필요한 정보만 입력 할 수 있게 해줌
main.js
1
Vue.http.options.root = 'https://your-project.firebaseio.com/';
  • 위와 같이 설정해 놓으면 post, get 사용시 좀 더 편리할 듯
App.vue
1
2
3
4
5
6
7
...
this.$http
.post('data.json', this.user)
...
this.$http
.get('data.json')
...

002-01

- 끝 -

Share Comments