<template>
    <div>
        <div v-if="isLoading">
        <h2 class="text-center text-4xl text-pink-600 font-extrabold">Loading......</h2></div>
            <div v-else> 
                <div class="container mx-auto text-blue-800 " v-for="(item, index) in page">
            <router-link :to="'/nn/'+item.slug"><h3>{{item.name}}   </h3></router-link>
            
            
                
            
             </div></div>

    </div>
</template>




<script>
    export default {
        data() {
            return {
                page: null,
                isLoading: true
            }
        },
        mounted: function (){
            fetch('https://api8.siliconpin.com/items/books?')
            
            .then(response => response.json())
            .then(data => {
            this.page = data.data
            this.isLoading = false
            })
        }
    }
</script>