Php 使用Laravel刀片实施VueJS？

我用Laravel和vue js创建了两个不同的提要组件，第一个是纯使用Laravel控制器并将数据传递给视图。另一个是使用控制器并传递到vue.js文件

但我试图将两者结合在一起，因为is对我来说更为用户友好，它将数据提取到视图中并使用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

@foreach（$feed作为$feed）
用户->化身}“class=“avatar”alt=“用户配置文件图像”>
发表了一篇文章。
{{$feed->created_at->diffForHumans（）}
{{$feed->content}

@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>

发表了一篇文章。
{{post.created_at}}
{{post.content}}

从“./Like.vue”导入Like
从“/Comment.vue”导入注释
从“/objective.vue”导入异议
导出默认值{
安装的（）{
这个。获取订阅源（）
},
组成部分：{
喜欢
反对
评论
},
方法：{
获取订阅源（）{
这是.http.get（“/feed”）
。然后（（响应）=>{
response.body.forEach（（post）=>{
此.$store.commit（'add_post'，post）
})
})
},
},
计算：{
员额（）{
返回此。$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>

真{{likers.length}
不真实{{likers.length}

导出默认值{
安装的（）{
},
道具：['id']，
计算：{
likers（）{
var likers=[]
this.post.likes.forEach（（like）=>{
likers.push（like.user.id）
})
回头客
},
auth_user_likes_post（）{
var check_index=this.likers.indexOf(
这是。$store.state.auth\u user.id
)
如果（检查索引==-1）
返回错误
其他的
返回真值
},
post（）{
返回此。$store.state.posts.find（（post）=>{
return post.id==this.id
})
}
},
方法：{
like（）{
this.$http.get（'/like/'+this.id）
。然后（（resp）=>{
此.$store.commit（'update\u post\u likes'{
id:this.id，
比如：resp.body
})
})
},
不像（）{
this.$http.get（'/districs/'+this.id）
。然后（（响应）=>{
此.$store.commit（'与_post'不同，'{
post_id:this.id，
like_id:response.body
})
})
}
}
}

---

你能看看这个吗，可能会有帮助

它详细解释了如何以正确的方式设置模型、计算方法和方法，并且这些步骤非常容易遵循

我注意到你有：

mounted(){
    //blank
}

您可以添加一些功能，如：

mounted() {
this.isFavorited = this.isFavorite ? true : false;
}

---

这将有助于处理切换部分

为什么您强制Laravel Blade不关心胡须？

这应该可以工作。已编辑，但渲染函数中出现错误：（，位于C:\wamp64\www\talking\u-pillow\resources\assets\js\components\Like.vue）你能给我们看看那些组件吗？比如.vue和objective.vueHi，我更新了代码，请检查。

mounted(){
    //blank
}

mounted() {
this.isFavorited = this.isFavorite ? true : false;
}