Board1.vue_20211222

<template>
    <div>
        <h3>Board1.vue</h3>

        <el-table :data="items" style="width: 100%; cursor: pointer;"  @row-click="rowClick">
            <el-table-column prop="no" label="글번호" width="180" />
            <el-table-column prop="title" label="제목" width="180" />
            <el-table-column prop="writer" label="글쓴이" width="180" />
            <el-table-column prop="hit" label="조회수" width="180" />
            <el-table-column prop="regdate" label="날짜" width="180" />
        </el-table>     
        <el-pagination layout="prev, pager, next" :total="500"
            @current-change="currentChange">
            <!-- current-change는 사이트 하단에서 퍼온거임. 그 뒤는 변수지정 -->
        </el-pagination>    
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        created() {
            this.handleData();
        },

        data() {
            return {
                items: [],
                page: 1,
                row: 1,
            }
        },
        
        methods: {
            rowClick(row) {
                console.log("Board1.vue => rowClick", row);
                this.$router.push({
                    name:'Board1One',
                    query: {no : row.no} // 번호만 넘겨야함. 고유하니까. 나머지는 바뀔 수 있음
                });
            },

            async handleData() {
                const url = `http://ihongss.com/json/board.json?page=${this.page}`;
                const headers = {"Content-Type":"application/json"};

                const response = await axios.get(url, {headers:headers});
                //response.data => {ret: 'y', data: Array(10)}
                console.log(response);
                if(response.data.ret === 'y') {
                    this.items = response.data.data;
                }
            },

            currentChange(page) {
                console.log('Board1.vue => currentChange', page); 
                // 페이지네이션의 페이지 클릭하면 페이지 넘어오는지 확인

                this.page = page;
                this.handleData();
            },


        }
    }
</script>

<style scoped>

</style>