Exam10.vue_20211216

<template>
    <div>
        <h3>exam10 실습</h3>

        <el-table :data="items" size="mini" style="width: 100%;">
            <el-table-column type="index" width="50" />
            <el-table-column label="아이디" width="180" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.id" />
                </template>
            </el-table-column>
            <el-table-column  label="이름" width="180" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.name" />
                </template>
            </el-table-column>
            <el-table-column  label="나이" width="180" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.age" />
                </template>
            </el-table-column>
            <el-table-column  label="국어" width="180" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.score.kor" />
                </template>
            </el-table-column>
            <el-table-column  label="영어" width="180" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.score.eng" />
                </template>
            </el-table-column>
            <el-table-column  label="수학" width="180" >
                <template #default="scope">
                    <el-input size="mini" type="text" v-model="scope.row.score.math" />
                </template>
            </el-table-column>

        </el-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/exam10.json";
                // 아이디, 이름, 나이, 국어점수, 영어점수, 수학점수
                const headers = { 'Content-type':'application/json' };

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

                console.log(response);
                // 정상출력일 때 status가 200이거나 ret이 'y'여야함
                if(response.status === 200 && response.data.ret === 'y'){ 
                    this.items = response.data.data;
                }
            }
        }
    }
</script>

<style scoped>
</style>