Iris.vue_20211216

<template>
    <div>
        <h3>Iris실습</h3>
        <table border="1">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>꽃받침 길이</th>
                    <th>꽃받침 너비</th>
                    <th>꽃잎 길이</th>
                    <th>꽃잎 너비</th>
                    <th>꽃의 품종</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(tmp, idx) in items" v-bind:key="tmp">
                    <td>{{ (idx + 1) }}</td>
                    <td>
                        <!-- localhost:8080/iris1?asdf34 -->
                        <router-link :to="{
                            path:'/iris1', query:{ no:(idx + 1), key:'asdf', name:'def'}}">
                            {{ tmp.petalLength }}
                        </router-link>
                    </td>
                    <td>{{ tmp.petalWidth }}</td>
                    <td>{{ tmp.sepalLength }}</td>
                    <td>{{ tmp.sepalWidth }}</td>
                    <td v-text="tmp.species"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

    import axios from 'axios';
    export default {
        created() { // life cycle 생명주기
            this.handleIris(); // methods 호출
        },

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

        methods:{  // ':'이 붙으면 하위에 n개를 만들 수 있다
            // methods 안에 await을 쓸려면 methods 앞에 'async'를 붙여야 함. 문법 규칙.
            async handleIris(){ 
                // 백엔드의 서버 주소
                const url = 'https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json';

                // 호출하는 데이터의 종류가 json이라고 백엔드에 얘기함. 헤더 정의
                const headers = { 'Content-type':'application/json' };

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

                // 결과값 확인
                console.log(response);
                if(response.status === 200){ // 정상출력일 때 status가 200이어야 함.
                    this.items = response.data;
                }
            }
        }
    }
</script>

<style scoped>

</style>