How to store like-button clicks in Database using vue.js


I have a simple like button vue.js app for a website so that users can like or dislike an article. You can see the live site here:

https://thecitipost.com/?action=viewArticle&articleId=11

The code is working perfectly, but I need to be able to store the button click counters in my DB so they don’t reset on page refresh. Can anyone shed some light on how to do this? I have scoured the internet and I can’t find what I am looking for. Here is my code:

<div class="reaction-wrapper">
        <div class="main">
        <div id="app">
            <!-- Reaction system start -->
            <div class="reaction-container"><!-- container div for reaction system -->
                <span class="reaction-btn"> <!-- Default like button -->
                    <span class="reaction-btn-emo like-btn-default"></span> <!-- Default like button emotion-->
                    <span class="reaction-btn-text">Like</span> <!-- Default like button text,(Like, wow, sad..) default:Like  -->
                    <ul class="emojies-box"> <!-- Reaction buttons container-->
                        <li @click="likeIt" class="emoji emo-like" data-reaction="Like"></li>
                        <li @click="loveIt" class="emoji emo-love" data-reaction="Love"></li>
                        <li @click="HaHaIt" class="emoji emo-haha" data-reaction="HaHa"></li>
                        <li @click="WowIt" class="emoji emo-wow" data-reaction="Wow"></li>
                        <li @click="SadIt" class="emoji emo-sad" data-reaction="Sad"></li>
                        <li @click="AngryIt" class="emoji emo-angry" data-reaction="Angry"></li>
                    </ul>
                </span>
                <div class="like-stat"> <!-- Like statistic container-->
                    <span class="like-emo"> <!-- like emotions container -->
                        <span class="like-btn-like"></span>  <!--given emotions like, wow, sad (default:Like) -->
                    </span>
                     <span class="like-details">Hover over the like button to see your options!</span> 
                </div>
                <div id="likes-counter">
                 <ol>
                  <li>Likes:{{likes}}</li>
                  <li>Love:{{love}}</li>
                  <li>HaHa:{{HaHa}}</li>
                  <li>Wow:{{Wow}}</li>
                  <li>Sad:{{Sad}}</li>
                  <li>Angry:{{Angry}}</li>
                 </ol>
                </div>
            </div>
            <!-- Reaction system end -->
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 

<script>
new Vue({
    el:'#app',
    data:{
        isHidden:true,
        likes:0,
        love:0,
        HaHa:0,
        Wow:0,
        Sad:0,
        Angry:0
    },
    methods:{
        showIt:function(){
            this.isHidden=false;
        },
        hideIt:function(){
            this.isHidden=true;
        },
        likeIt:function(){
            this.likes++;
        },
        loveIt:function(){
            this.love++;
        },
        HaHaIt:function(){
            this.HaHa++;
        },
        WowIt:function(){
            this.Wow++;
        },
        SadIt:function(){
            this.Sad++;
        },
        AngryIt:function(){
            this.Angry++;
        },
    }
});

Any help would be greatly appreciated.

Thank you!

Source: Vue – Stack Overflow

November 29, 2021
Category : News
Tags: database | storage | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.