[英]Implement VueJS with Laravel Blade?
我用Laravel和vue js创建了两个不同的feed组件,第一个是纯粹使用laravel控制器并将数据传递给视图的。 另一个是使用控制器并将其传递给vue.js文件。
但是我试图将两者结合在一起,因为对我来说将是更用户友好的,这是将数据获取到视图中并使用vue按钮进行绑定。 我曾尝试使用此代码,但有错误。有可能这样做吗?
@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">
<a href="#" class="post-user-name">{{ $feed->user->name }}</a>
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
但是问题是如何将ID传递给我的Vue
<like :id="post.id"></like>
<objection :id="post.id"></objection>
这是我的Feed.vue文件
<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">
<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
}
}
}
这是我的“赞”组件之一。
<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
})
})
}
}
}
您能看看这个https://scotch.io/tutorials/implement-a-favoriting-feature-using-laravel-and-vue-js可能会有所帮助。
它详细说明了如何以正确的方式设置模型,计算出的方法以及方法,而且这些步骤也非常容易遵循。
我注意到您有:
mounted(){
//blank
}
您可以添加一些功能,例如:
mounted() {
this.isFavorited = this.isFavorite ? true : false;
}
这将有助于处理切换部分
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.