用 Laravel Blade 实现 VueJS？

Question

我用 Laravel 和 vue js 创建了两个不同的提要组件，第一个是纯粹的使用 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
        }
    }


}

这是我的 Like 组件之一。

<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

你能看看这个https://scotch.io/tutorials/implement-a-favoriting-feature-using-laravel-and-vue-js，可能会有帮助。

它详细解释了如何以正确的方式设置模型、计算方法和方法，而且步骤太容易遵循了。

我注意到你有：

mounted(){
    //blank
}

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

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

这将有助于处理切换部分