API는 위에 사이트에서 가져왔습니다.
https://reqres.in/api/users?page=1
이렇게 생겼습니다.
유저 리스트를 뿌려주고 페이지 이동이 되도록 하겠습니다.
// App.vue
<template>
<div>
<User />
</div>
</template>
<script>
import User from "@/components/User";
export default {
components: {
User
}
};
</script>
User 컴포넌트를 만들도록 하겠습니다.
axios 를 사용하여 ajax를 구현하겠습니다.
설치법과 사용법은 https://www.npmjs.com/package/axios
// User.vue
<template>
<div>
<h1>User Info</h1>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
users: null,
totalPage: null,
pageNum: 1
};
},
methods: {
fetchData(pageNum) {
axios
.get("https://reqres.in/api/users?page=" + pageNum)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}
},
created() {
this.fetchData(this.pageNum);
}
};
</script>
콘솔창에서 아래와 같은 결과를 받을 수 있을겁니다.
받은 데이터를 입혀보겠습니다.
// User.vue
<template>
<div>
<div v-for="(user, idx) in users" :key="idx">
<h2>{{user.first_name}}</h2>
<img :src="`${user.avatar}`" alt />
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
users: null,
totalPage: null,
pageNum: 1
};
},
methods: {
fetchData(pageNum) {
axios
.get("https://reqres.in/api/users?page=" + pageNum)
.then(res => {
this.users = res.data.data;
this.totalPage = res.data.total_pages;
})
.catch(err => {
console.log(err);
});
}
},
created() {
this.fetchData(this.pageNum);
}
};
</script>
first name과 이미지만 가져온 모습입니다.
이제 페이지 이동을 위에 페이징 버튼을 만들겠습니다.
total_page를 props로 넘겨주겠습니다.
// User.vue
<template>
<div class="user_wrap">
<div class="box" v-for="(user, idx) in users" :key="idx">
<h2>{{user.first_name}}</h2>
<img :src="`${user.avatar}`" alt />
</div>
<Paging :totalPage="totalPage" />
</div>
</template>
// Paging.vue
<template>
<ul class="paging">
<li v-for="(page, idx) in totalPage" :key="idx">{{page}}</li>
</ul>
</template>
<script>
export default {
props: ["totalPage"],
data() {
return {};
}
};
</script>
버튼이 생겼으니 이제 이동이 되도록 합니다.
$emit으로 이벤트를 User.vue로 전달하도록 하겠습니다.
// Paging.vue
<template>
<ul class="paging">
<li v-for="(page, idx) in totalPage" :key="idx" @click="movePage(page)">{{page}}</li>
</ul>
</template>
<script>
export default {
props: ["totalPage"],
data() {
return {};
},
methods: {
movePage(page) {
this.$emit("movePage", page);
}
}
};
</script>
현재 페이지 번호를 $emit에 인자로 넘겨줍니다.
User.vue에서 이벤트를 받으면 fetchData의 인자에 페이지 번호를 넘겨주면 됩니다.
// User.vue
<template>
<div>
<divv-for="(user, idx) in users" :key="idx">
<h2>{{user.first_name}}</h2>
<img :src="`${user.avatar}`" alt />
</div>
<Paging :totalPage="totalPage" @movePage="movePage" />
</div>
</template>
<script>
import axios from "axios";
import Paging from "./Paging";
export default {
data() {
return {
users: null,
totalPage: null,
pageNum: 1
};
},
methods: {
fetchData(pageNum) {
axios
.get("https://reqres.in/api/users?page=" + pageNum)
.then(res => {
this.users = res.data.data;
this.totalPage = res.data.total_pages;
console.log(res);
})
.catch(err => {
console.log(err);
});
},
movePage(page) {
this.fetchData(page);
}
},
created() {
this.fetchData(this.pageNum);
},
components: {
Paging
}
};
</script>
잘 작동하는지 확인해줍니다.
반응형
'Vue' 카테고리의 다른 글
Vue watch의 속성 (0) | 2022.11.07 |
---|---|
Vue 환경변수 (0) | 2021.09.07 |
vuex, router로 영화 앱 만들기 예제 (4) | 2020.01.06 |
slot 으로 재사용하기 (0) | 2019.11.22 |
같은 컴포넌트 레벨의 통신방법 (0) | 2019.10.30 |