JSFiddle - React, Tailwind, and code Playground

by von

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<html>
<head>
</head>
<body>
<div id="app">
            <ul>
                <li v-for="item in items">
                    <h3>{{ item['fields']['Name'] }}</h3>
   
                     <p>Title: {{ item['fields']['Title'] }}</p>
                    <p><strong>Nickname: </strong>{{ item['fields']['Nickname'] }}</p>
                    <p><strong>Courts: </strong>{{ item['fields']['Courts'] }}</p>
                    <p><strong>Kingdoms: </strong>{{ item['fields']['Kingdoms'] }}</p>
                       <p><strong>Kingdoms: </strong>{{ item['fields']['House'] }}</p>
                    <img :src="item['fields'][''][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']" width="150">
                </li>
            </ul>            
        </div><!--app-->
</body>
</html>

JavaScript

var app = new Vue({
                el: '#app',
                data: {
                    items: []
                },
                mounted: function(){
                   this.loadItems(); 
                },
                methods: {
                    loadItems: function(){
                        
                        // Init variables
                        var self = this
                        var app_id = "appKP2gLWofAUGj5e";
                        var app_key = "keyR7BRqyzvZhUaKI";
                        this.items = []
axios.get(
                            "https://api.airtable.com/v0/"+app_id+"/Characters?view=Grid%20view",
                            { 
                                headers: { Authorization: "Bearer "+app_key } 
                            }
                        ).then(function(response){
                            self.items = response.data.records
                        }).catch(function(error){
                            console.log(error)
                        })
                    }
                }
            })