Sunday, April 2, 2017

Implement Vue-infinite-loading into laravel +vue js project

I having a vue js file "Feed" which is fetching post from server and show it in my template. Its work perfectly and now i want implement a lazy loader for it. I found this vue-infinite-loading from online and after testing it can work for my project. But when i combine the code according the documentation with my current code. Its seem like hard for me since i still fresh in vue. My feed was fetched the array and passed into computed array call "posts". But if follow the documentation it should passing into new data array which is "list". i am quite confusing and don't know what to do. Is anybody know how to solve it?

My template is

<template>
<div>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-0">
            <div class="panel panel-white post panel-shadow" v-for="post in posts">
                <div class="post-heading">
                    <div class="pull-left image">
                        <img :src="post.user.avatar" class="avatar" alt="user profile image">
                    </div>
                    <div class="pull-left meta">
                        <div class="title h5">
                            <a href="#" class="post-user-name"></a>
                            made a post.
                        </div>
                        <h6 class="text-muted time"></h6>
                    </div>
                </div>

                <div class="post-description">
                    <p></p>
                    <div class="stats">
                        <like :id="post.id"></like>
                        <a href="#" class="stat-item">
                            <i class="fa fa-retweet icon"></i>12
                        </a>
                        <a href="#" class="stat-item">
                            <i class="fa fa-comments-o icon"></i>3
                        </a>
                    </div>
                </div>
                <comment :id="post.id"></comment>
            </div>
        </div>
    </div>
</div>
</div>

My script

<script>
import Like from './Like.vue'
import Comment from './Comment.vue'
import InfiniteLoading from 'vue-infinite-loading';
export default{
    data() {
        return {
            list: [],
        };
    },
    mounted(){
        this.get_feed()
    },

    components:{
        Like,
        Comment,
        InfiniteLoading
    },

    methods:{
        get_feed(){
            this.$http.get('/feed')
                .then( (response)=>{
                    response.body.forEach( (post) =>{
                        this.$store.commit('add_post',post)
                    })
                })
        },

        onInfinite() {
            setTimeout(() => {
                const temp = [];
                for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
                    temp.push(i);
                }
                this.list = this.list.concat(temp);
                this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
            }, 1000);
        },
    },

    computed: {
        posts(){
            return this.$store.getters.all_posts
        }
    }

}

In console, the returned array is like this. enter image description here



via masterhunter

Advertisement