Vue中的类绑定

class binding in Vue

本文关键字：绑定 Vue      更新时间：2023-09-26

我一直在创建一个论坛，用户可以在这里点击点赞按钮。

我试图实现的是，当用户点击一个按钮时，我希望该按钮被着色，以显示用户已经喜欢上了一条评论，就像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

}

但是，问题是我不能把一个参数（在这种情况下是评论点赞）传递给计算道具，对吧？我需要循环浏览"赞"以获得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
        })
    }

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

因此，Vue应该通过AJAX查询PHP，以确定它应该显示哪个类，无论用户是否已经喜欢该命令。

在这一点上，当用户单击按钮时，您可以重用该函数，以便使用相同的逻辑自动刷新数据。

我写了一个简单的模板。你可以看看。代码尚未编译，因此可能存在一些小错误。所有的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>
相关文章：