class binding in Vue

Question

I've been creating a forum where users can click a like button.

What I am trying to achieve is that when a user click a button I want that button to be colored to show the user already liked a comment just like Laracast.

How can I do it?So far I got

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

As you can see I am using class binding, and am trying to refer to a computed prop, but I am not sure how I can do it. Also, I am passing an auth_id to the component.So, seems like I need to compare to it like

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

}

But, the thing is I cannot pass an argument(comment.likes in this case) to computed props right?I need to loop through "likes" to get user_id

Sorry if I am not making myself clear.Any help would be appreciated.Thanks in advance.

----update-----

I added this code,but no luck...Why won't this work?

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

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

Steve Chamaillard · Accepted Answer · 2016-07-29 08:03:49Z

2

You should use Vue to get and display this data. Laravel (and PHP in general) will be of no help on the front end for this problem.

So, Vue should query the PHP through AJAX to find out which class it should display, whether the user already liked or not the commnt.

At this point, you can reuse that function when the user clicks on the button so that the data automatically gets refreshed with the same logic.

answered Jul 29, 2016 at 8:03

Steve Chamaillard

2,33920 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YI YANG · Accepted Answer · 2017-06-25 10:47:36Z

I wrote a simple template. You can have a look. The code is not compiled yet, so there may be some tiny bugs. All the api is faked. You should apply your own api.

I added some comments. Hope it explains the logic clearly and will help you.

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

Collectives™ on Stack Overflow

class binding in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related