Question

我一直在创建一个论坛，用户可以点击相似按钮。

我想要实现的是，当用户点击按钮时，我希望该按钮被着色以显示用户已经喜欢Laracast的评论。

我怎么能这样做？到目前为止我已经

了

<div class="Media--footer background">
        <div class="Media--footer__left">
                <button @click="addOrRemoveLikes(comment.id,auth_id)"
                    v-if="auth_id"
                >
    <--------------    Here    -------------------->
                    <i class="fa fa-thumbs-o-up" :class={'liked':  --HERE-- }></i> {{ comment.likes.length }}
                </button>
            <div v-else>
                <button 
                    style="border: 0; background:white;" 
                    @click="promptLogin=true"
                >
                <i class="fa fa-thumbs-o-up"></i> {{ comment.likes.length }}
                </button>
            </div>
        </div> 
        <div class="Media--footer__right" v-for="like in comment.likes">
            <a href="/@{{ like.user.name }}">{{ like.user.name }}</a>
        </div>
    </div>

正如您所看到的，我正在使用类绑定，并且我正在尝试引用计算的道具，但我不确定如何做到这一点。另外，我将auth_id传递给组件。所以，我觉得我需要像

那样进行比较

liked: function(){
return this.auth_id == like.user_id

}

但是，问题是我无法传递一个参数（在这种情况下是comment.likes）来计算道具吗？我需要循环“喜欢”来获取user_id

很抱歉，如果我没有说清楚的话。任何帮助都将不胜感激。谢谢。

---- -----更新

我添加了这段代码，但没有运气......为什么这不起作用？

<button @click="addOrRemoveLikes(comment.id,auth_id)"
                    v-if="auth_id"
                >
      <i class="fa fa-thumbs-o-up" :class="{'liked': liked(comment.likes)}"></i> {{ comment.likes.length }}
 </button>

Vue实例

liked:function(likes){
        var self = this
        likes.forEach(function(like){
            return self.auth_id == like.user_id
        })
    }

Answer 1

您应该使用Vue来获取并显示此数据。对于这个问题，Laravel（以及一般的PHP）在前端没有任何帮助。

因此，Vue应该通过AJAX查询PHP，找出它应该显示的类，用户是否已经喜欢该用户。

此时，您可以在用户单击按钮时重复使用该功能，以便使用相同的逻辑自动刷新数据。

Answer 2

我写了一个简单的模板。你可以看看。代码尚未编译，因此可能存在一些小错误。所有的api都是假的。你应该申请自己的api。

我添加了一些评论。希望它能清楚地解释逻辑并帮助你。

    <template>
         <button class="btn btn-default" v-on:click="toggleLike(anyparameters)" v-
          bind:class="className" ></button>
    </template>

    <script>
        export default {

            // any parameters passed as props
            props:['anyparameterpassedasprop'],

            mounted() {

                /*
                  when mounted, send request to your backend to check
                  whether the user already liked the comment or not
                  here I am sending a post request
                */
                axios.post('/api/liked').then(response => {

                    // update your liked status based on response data
                    this.liked = response.data.liked;
            })
        },
        data(){
            return{

                // variable used to store the 'like' status
                liked:false
            }
        },
        computed: {

            // here I am using computed attribute, but you can also use
            // class bind like v-bind:class="[liked?'liked','like']" to
            // return the corresponding class name
            className(){
                return this.liked ? 'liked' : 'like';
            }
        },
        methods:{

            // the toggleLike method invoked when the button clicked
            toggleLike(anyparameters){

                /* send the request to server, update the like status
                 here you should apply your own logic
                 based on this.liked variable
                 you can know the request is about to cancel like or add like
                */
                axios.post('/api/answer/like',{'anyparameters':anyparameters}).then(response => {

                    // update like statue based on respone
                    this.liked = response.data.liked;
                })
            }
        }
    }
</script>

Vue中的类绑定

2 个答案: