Exam21.vue

<template>
    <div>
        <h3>일별 박스오피스</h3>

        <el-table :data="items" size="mini" style="width: 100%;">
        <el-table-column type="index" width="50" />
            <el-table-column label="순위" width="60" style="margin:auto ;" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.rank" />
                </template>
            </el-table-column>
            <el-table-column  label="순위변동" width="70">
                <template #default="scope">
                    <el-input size="mini" type="text" style="width:60; margin:auto ;" v-model="scope.row.rankInten" />
                </template>
            </el-table-column>
            <el-table-column  label="올드앤뉴" width="70" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.rankOldAndNew" />
                </template>
            </el-table-column>
            <el-table-column  label="Cd" width="auto" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.movieCd" />
                </template>
            </el-table-column>
            <el-table-column  label="제목" width="auto" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.movieNm" />
                </template>
            </el-table-column>            
            <el-table-column  label="개봉일" width="auto" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.openDt" />
                </template>
            </el-table-column>
            <el-table-column  label="Amt" width="auto" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.salesAmt" />
                </template>
            </el-table-column>            
            <el-table-column  label="Share" width="auto" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.salesShare" />
                </template>
            </el-table-column>            
            
            <el-table-column  label="Inten" width="auto" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.salesInten" />
                </template>
            </el-table-column>            
        </el-table>



        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>순위</th>
                    <th>순위변동</th>
                    <th>올드앤뉴</th>
                    <th>Cd</th>
                    <th>영화제목</th>
                    <th>개봉일</th>
                    <th>salesAmt</th>
                    <th>salesShare</th>
                    <th>saleslnten</th>
                    <th>매출 추이</th>
                    <th>salesAcc</th>
                    <th>audiCnt</th>
                    <th>audilnten</th>
                    <th>audiChange</th>
                    <th>audiAcc</th>
                    <th>scrnCnt</th>
                    <th>showCnt</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="tmp in items" v-bind:key="tmp">
                    <td>{{ tmp.rnum }}</td>
                    <td>{{ tmp.rank }}</td>
                    <td>{{ tmp.rankInten }}</td>
                    <td>{{ tmp.rankOldAndNew }}</td>
                    <td>{{ tmp.movieCd }}</td>
                    <td>{{ tmp.movieNm }}</td>
                    <td>{{ tmp.openDt }}</td>
                    <td>{{ tmp.salesAmt }}</td>
                    <td>{{ tmp.salesShare }}</td>
                    <td>{{ tmp.salesInten }}</td>
                    <td>{{ tmp.salesChange }}</td>
                    <td>{{ tmp.salesAcc }}</td>
                    <td>{{ tmp.audiCnt }}</td>
                    <td>{{ tmp.audiInten }}</td>
                    <td>{{ tmp.audiChange }}</td>
                    <td>{{ tmp.audiAcc }}</td>
                    <td>{{ tmp.scrnCnt }}</td>
                    <td v-text="tmp.showCnt"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

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

        data() {
            return {
                items : [],
            }
        },

        methods:{
            async handleData() {
                const url = "http://ihongss.com/json/exam21.json";
                const headers = { 'Content-type':'application/json' };

                // 호출
                const response = await axios.get(url, headers);

                console.log(response);
                if(response.status === 200 && response.data.boxOfficeResult.showRange === '20120101~20120101'){ 
                    this.items = response.data.boxOfficeResult.dailyBoxOfficeList;
                }
            }
        }
    }
</script>

<style scoped>

</style>