[vue.js] riotAPI 활용하여 정보 가져오기

<template>
    <div>
        <input type="text" v-model="name" @keyup.enter="getName">
        
        <h1>정보</h1>
        <table>
            <thead>
            <h1></h1>
                <tr>
                    <th>닉네임</th>
                    <th>레벨</th>
                    <!-- <th>암호화된 ID</th> -->
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{nickName}}</td>
                    <td>{{summonerLevel}}</td>
                    <!-- <td>{{summonerID}}</td> -->
                </tr>
            </tbody>
        </table>
        <h1>전적</h1>
        <table>
            <thead>
                <tr>
                    <th>티어</th>
                    <th>랭크</th>
                    <th>승리</th>
                    <th>패배</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="i" v-for="(entry,i) in entries.data">
                    <td>{{entry.tier}}</td>
                    <td>{{entry.rank}}</td>
                    <td>{{entry.wins}}</td>
                    <td>{{entry.losses}}</td>
                </tr>
            </tbody>
        </table>
 
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '양아취쉐리',
                nickName: '',
                summonerLevel: '',
                summonerID: '',
                accountID: '',
                entries: '',
                riotAPI: '직접 받은 Riot API Key'



                //getLeagueEntries
                // tier: '',
                // rank: '',
                // wins: '',
                // losses: ''
            };
        },
        created() {
            this.getName();
            //this.getLeagueEntries()
        },
        methods: {
            getName(){
                
                ////async - await 사용 방법
            //async getName(){
                // const tempName = await this.$http.get('https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/' + this.name + '?api_key=' + riotAPI);
                // console.log(tempName)

                // if(tempName.data.name == this.name) {
                //     this.nickName = tempName.data.name;
                //     this.summonerLevel = tempName.data.summonerLevel;

                //     console.log(this.name);
                // }

                this.$http.get('https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/' + this.name + '?api_key=' + this.riotAPI)
                .then((res) => {
                    console.log(res)

                    //if(res.data.name == this.name) {
                        this.nickName = res.data.name; 
                        this.summonerLevel = res.data.summonerLevel;
                        this.summonerID = res.data.id;
                        this.accountID = res.data.accountID;

                        this.getLeagueEntries()
                        console.log(this.summonerID)
                    //}
                })
                .catch((err) => {
                    alert('다시 입력 : ' + err)
                })
            },
            getLeagueEntries() {
                this.$http.get('https://kr.api.riotgames.com/lol/league/v4/entries/by-summoner/' + this.summonerID + '?api_key=' + this.riotAPI)
                .then((response) => {
                    this.entries = response

                    console.log(this.entries)
                })
                .catch((err) => {
                    alert('다시 ㄱㄱ' + err)
                })
        }
    }
}
</script>
<style scoped>
    table {
        font: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
</style>