使用Laravel Blade实施VueJS？

Question

我用Laravel和vue js创建了两个不同的feed组件，第一个是纯使用laravel控制器并将数据传递给view。另一种方法是使用控制器并传递给vue.js文件。

但我尝试将两者结合在一起，因为对于我来说，将数据提取到视图中并与vue按钮绑定会更加用户友好。我曾经尝试过这段代码，但是有没有可能让error.Is做到这一点？

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

​

Answer 1

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

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

我注意到你有：

mounted(){
    //blank
}

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

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

这将有助于处理切换部分