el-table에 데이터 넣기

팡태(❁´◡`❁)·2022년 4월 13일
0

PROJECT

목록 보기
7/14
<template>
    <header>
    </header>
    <main>
        <div>
            <h3>게시판</h3>
            <hr />
            <router-link to="/boardwrite"><el-button type="primary">글쓰기</el-button></router-link>
            <!-- <div v-if="state.items">
                <table style="border: 2px">
                    <tr>
                        <th>번호</th>
                        <th>제목</th>
                        <th>조회수</th>
                    </tr>
                    <tr v-for="obj of state.items" :key="obj">
                        <td>{{obj.bno}}</td>
                        <td><a @click="handlePage(obj.bno)" style="cursor: pointer;">{{obj.btitle}}</a></td>
                        <td>{{obj.bhit}}</td>
                    </tr>
                </table>
            </div> -->

            <div>
                <el-table :data="state.items">
                    <el-table-column prop="bno" label="번호" />
                    <el-table-column prop="btitle" label="제목" />
                    <el-table-column prop="bhit" label="조회수" />
                </el-table>
            </div>

        </div>
    </main>
    <footer>
    </footer>
</template>

<script>
import { onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
export default {
    setup () {
        const router = useRouter();
        const state = reactive({
            page: 1,
        });

        const handleData = async() => {
            const url = `/ROOT/api/board/selectlist?page=${state.page}`;
            const headers = { "Content-Type": "application/json" };
            const response = await axios.get(url, { headers });
            console.log(response.data);
            if(response.data.status === 200) {
                state.items = response.data.result;
            }
        };

        const handlePage = async(no) => {
            const url = `/ROOT/api/board/updatehit?bno=${no}`;
            const headers = { "Content-Type": "application/json" };
            const response = await axios.put(url, {}, { headers });

            console.log(response.data);
            if(response.data.status === 200) {
                router.push({ name: 'BoardOne', query: { no: no } });    
            }
        }

        onMounted(() => {
            handleData();
        })

        return { state, handlePage }
    }
}
</script>

<style lang="scss" scoped>

</style>

0개의 댓글