使用Laravel雄辩地计算出like的总数并传递到vue js文件中

Question

目前，我正在使用Vue js在我的laravel项目中实现一个类似的系统。 该场景是在用户喜欢该帖子之后。 它将在“喜欢”按钮旁边显示帖子的总喜欢。 如果使用控制器并将数据传递到视图中很容易做到。 但是当更改为Vue js时，我不知道该怎么做。 这是我的Like.vue文件。

<template>

<button class="btn btn-primary" v-if="!auth_user_likes_post" @click="like()">
    Support
</button>

<button class="btn btn-primary" v-else @click="unlike()">
    Unsupport
</button>

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

类似和不同的功能已经完成并且可以正常工作。 现在我只需要显示总数。

这是Feed.vue文件。 像被添加到此页面。

<div class="post-description">
                    <p>{{ post.content }}</p>
                    <div class="stats">
                        <like :id="post.id"></like>
                        <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>

如果我的功能无法实现预期的效果，那么您可以推荐其他方法来做到这一点吗？

Answer 1

我有喜欢的人返回的数组。 但是一开始，我始终无法实现我的目标。 因此，此{{likers.length}}实际上可以显示总数。