Vue 中的类绑定

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）传递给计算的道具，对吗？我需要遍历“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。

我添加了一些 cmets。希望它能清楚地解释逻辑并对您有所帮助。

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