JSFiddle - React, Tailwind, and code Playground

by Kiran N

HTML

<div id = "onclButton">
 <button v-on:click="upCount()">Like</button>
  <button v-on:click="downCount()">DisLike</button>
  <button v-on:click="resetCount()">Reset</button>
  <p id = "upDownCount">  Vote  : {{ count }}</p>
</div>

JavaScript

var upDownVote = new Vue({
  el: '#onclButton',
  data: {
    countmessage : 0
  },
  methods: {
    upCount: function () { 
     upDownVote.$set('count' , upDownVote.count + 1) ;
    },
    downCount: function(){
     if(upDownVote.count > 0){
        upDownVote.$set('count' , upDownVote.count - 1) ; 
      }
    },
    resetCount:function(){
       upDownVote.$set('count', 0) ;
    }
    
  }
})

upDownVote.$set('count', 0)