newws.vue

<template>

    <div class="container">
        <div class="row">
                <div class="container ">
                    <b-card-group columns class="card-padding " ref="blogs">
                    <b-card  bg-variant="dark" text-variant="white" v-for="blog in blogs" :key="blog.id" :blog="blog"
                             img-src= "https://i.ytimg.com/vi/27Zx4dB-dLk/maxresdefault.jpg"
                             img-alt="Image"
                             img-top
                             tag="article"
                             style="max-width: 20rem;"
                             class="mb-4 card-padding">
                        <h4 class="card-text">{{ blog.title }}</h4>
                        <!--<router-link :to="'/{{posts.url}}'" class="btn btn-primary">read more</router-link>-->
                    </b-card>
                    </b-card-group>
                </div>
            <button @click="getPost()" class="btb btn-primary"> Get More</button>
        </div>
    </div>
</template>

<script>

export default {
    name:'news',
    data(){
        return{
            blogs : [],
            allblogs: [],
            spliceBlog :[],
            isLoading: false
        }
    },
    created()
    {
        this.$http.get("https://newsapi.org/v2/top-headlines?country=us&apiKey=c7a362d36ae645a693fac55446321384")
            .then(response => {
                this.allblogs = response.data.articles;
                console.log(this.allblogs)
                 this.blogs= this.allblogs.splice(0, 3)

                console.log("output",this.blogs)
            });
    },
    methods: {
        getPost: function () {
            let loadBlogs = []
            for(let i = 0; loadBlogs < this.allblogs; i++){
                loadBlogs.push(this.allblogs[i]);
                this.blogs = this.allblogs
            }
        }
    },
    // {
    //     this.$http.get("http://jsonplaceholder.typicode.com/posts")
    //         .then(response => response.json(), error => console.log(error))
    //         .then(json => this.posts = json, error => console.log(error));
    // }

}

</script>

<style>
    .card-padding{
        padding: 5px 5px 5px 5px;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin-left: 20%;
    }
    li {
        display: inline-block;
        margin: 0 5px;

    }

</style>