Feed

by masterhunter

HTML

<template>
    <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">{{ post.user.name }}</a>
                                made a post.
                            </div>
                            <h6 class="text-muted time">{{ post.created_at }}</h6>
                        </div>
                    </div>

                    <div class="post-description">
                        <p>{{ post.content }}</p>
                        <div class="stats">
                            <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>

</template>

JavaScript

export default{

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

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

    }