JSFiddle - React, Tailwind, and code Playground

by Fayaz Ahmed

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>



<div id="app">
    	<p v-if="loader" style="text-align: center;">
    		<i class='bx bx-loader-alt bx-spin'></i>
    	</p>
        <ul>
            <li v-for="item in items">
                {{ item.City }}
            </li>
        </ul>
    </div>

JavaScript

new Vue({
        el: '#app',
        data: {
            items: null,
            loader : true
        },
        mounted() { 
        axios.get('https://api.jsonbin.io/b/5c0f584783dba9483eff7ad8')
                .then(response => (this.items = response.data))                
                .then(response => {this.items = response.data; loader = false})
        }
    });