Cacher is the code snippet organizer for pro developers

<template>
    <button type="submit" class="btn btn-secondary btn-sm like-button"
            rel="tooltip" title="Beğen"
            v-on:click="favorite"
            v-bind:disabled="submitted">
        <i class="fa" v-bind:class="iconFavori"></i> {{ total_likes }}
    </button>
</template>

<script>
    export default {
        props: ['id', 'liked', 'likes_count'],
        data() {
            return {
                submitted: false,
                iconFavori: this.setIcon(this.liked),
                count: this.likes_count

            }
        },
        computed: {
            total_likes: function () {
                return this.count;
            }
        },
        methods: {
            favorite() {
                this.submitted = true;
                this.iconFavori = 'fa-spinner fa-spin';
                let $this = this;
                axios.post('/replies/' + this.id + '/favorites')
                    .then(function (response) {
                        $this.submitted = false;
                        $this.iconFavori = $this.setIcon(response.data.isFavorited);
                        $this.count = response.data.favorite_count || '';
                        if (response.data.isFavorited) {
                            flash('Beğendiniz.');
                        }
                    }).catch(function (error) {
                    if (error.response.status) {
                        $this.submitted = false;
                        $this.iconFavori = $this.setIcon(false);
                        flash('Önce giriş yapmalısınız.');
                    }
                });
            },
            setIcon($check){
                return ($check ? 'fa-heart' : 'fa-heart-o' )
            }
        }
    };
</script>

<style>
    .like-button {
        cursor: pointer;
    }

    .like-button i {
        color: #ff4628;
    }

</style>