Implement VueJS with Laravel Blade? - php

Question

I have create a two different feed component with Laravel and vue js, the first one is pure using laravel controller and passing the data to view. Another one is using controller and passing to vue.js file.
But i trying to combine two together since is would be more user friendly for me which is fetching data into view and binding with vue button.
i had tried with this code but having error.Is there possible to do that?
#foreach($feeds as $feed)
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-0">
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left image">
<img src="{{$feed->user->avatar}}" class="avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
{{ $feed->user->name }}
made a post.
</div>
<h6 class="text-muted time">{{ $feed->created_at->diffForHumans() }}</h6>
</div>
</div>
<div class="post-description">
<p>{{ $feed->content }}</p>
<div class="stats">
<like id="{{$feed->id}}"></like> <objection id="{{$feed->id}}"></objection>
<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>
</div>
</div>
</div>
</div>
#endforeach
But the problems is how to passing the id into my vue which is
<like :id="post.id"></like>
<objection :id="post.id"></objection>
Here is my Feed.vue file
<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">
{{ post.user.name }}
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">
<like :id="post.id"></like>
<objection :id="post.id"></objection>
<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>
<script>
import Like from './Like.vue'
import Comment from './Comment.vue'
import Objection from './Objection.vue'
export default{
mounted(){
this.get_feed()
},
components:{
Like,
Objection,
Comment
},
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
}
}
}
This is one of my Like components.
<template>
<button class="btn btn-basic" v-if="!auth_user_likes_post" #click="like()">
True {{ likers.length }}
</button>
<button class="btn btn-primary" v-else #click="unlike()">
Untrue {{ likers.length }}
</button>
<script>
export default {
mounted(){
},
props: ['id'],
computed: {
likers() {
var likers = []
this.post.likes.forEach( (like) => {
likers.push(like.user.id)
})
return likers
},
auth_user_likes_post() {
var check_index = this.likers.indexOf(
this.$store.state.auth_user.id
)
if (check_index === -1)
return false
else
return true
},
post() {
return this.$store.state.posts.find( (post) => {
return post.id === this.id
})
}
},
methods: {
like() {
this.$http.get('/like/' + this.id)
.then( (resp) => {
this.$store.commit('update_post_likes', {
id: this.id,
like: resp.body
})
})
},
unlike() {
this.$http.get('/unlike/' + this.id)
.then( (response) => {
this.$store.commit('unlike_post', {
post_id: this.id,
like_id: response.body
})
})
}
}
}

Answer 1

Can you take a look at this https://scotch.io/tutorials/implement-a-favoriting-feature-using-laravel-and-vue-js, might be helpful.
It explains in details how you setup the Model in a proper way, the computed, and methods, also the steps are just too easy to follow.
I noticed that you have:
mounted(){
//blank
}
You could add some functionality like:
mounted() {
this.isFavorited = this.isFavorite ? true : false;
}
This will help handle the toggle part