BlogAllPostsComponent.vue

<template>
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-4" v-for="(post, index) in filteredItems" :key='index'>
                    <div class="item-post">
                        <a :href="'/blog/post/' + post.slug" :title="post.title" >
                            <img :src="post.image" :alt="post.title" class="img-fluid img-thumbnail" >
                            <h4>{{post.title}}</h4>
                            <p>{{post.description}}</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <pagination class="" :data="allPosts.meta" :limit="1" @pagination-change-page="getAllPosts"></pagination>
            </div>
        </div>
        <div class="col-md-3">
            <input type="text" v-model="search">
        </div>
    </div>
</template>

<script>
    Vue.component('pagination', require('laravel-vue-pagination'))
    export default {
        data () {
            return {
                allPosts: { data: [] },
                search: '',
            }
        },
        created() {
            this.getAllPosts()
        },
        computed: {
            filteredItems() {
                return this.allPosts.data.filter(post => {
                    return post.title.toLowerCase().indexOf(this.search.toLowerCase()) > -1
                })
            }
        },
        methods: {
            getAllPosts(page = 1){
                const action = '/api/posts?page=' + page
                axios.get(action).then(response => {
                    this.allPosts = response.data
                }).catch(error => {
                    console.error(error)
                })
            },
        },
    }
</script>