0

Im trying to build my own like system with Laravel, VUE, & Vuetify, but I ran into a problem. In order for the likes to increment +1 in the database, 2 quick clicks are required. If I use a normal slow click, the likes amount will just revert back to the original amount.

In my methods I have the following

addLike(like, id) {
  axios.put('/api/posts/' + id, {
    likes: like++
  })
  .then(res => {
    this.$toast.success('You liked a post')
      this.$store.dispatch('post/fetchPosts')
      this.$emit('success', res.data)
   })
},

The button used to click the method

<v-btn
  @click.stop="addLike(post.likes++, post.id)"
  icon
  class="mx-auto"
  ><v-icon>mdi-heart</v-icon>{{ post.likes }}
</v-btn>
Shawn Sonnier
  • 513
  • 5
  • 10
  • 28
  • to clarify you want the like functionality to fire only when double clicked? – Evan Apr 09 '20 at 07:18
  • No. The problem is it only fires when double clicked. – Shawn Sonnier Apr 09 '20 at 07:21
  • Try incrementing "like" variable before sending it to your backend, at the first line of the "addLike" function. It would be even better if you don't send this number to your backend but you only send the post id to your backend, then your backend add 1 to the likes count and returns the new like count. Because with your method, I can set the number of likes I want on any posts of your website. – ykc Apr 09 '20 at 07:23
  • `@click.stop="addLike(post.likes++, post.id)"` This call is a bit weird in my opinion. You are calling the `addLike` function, but you are increasing the like in the param. Another note is that there is a difference between `like++` and `++like`: https://stackoverflow.com/questions/3469885/somevariable-vs-somevariable-in-javascript – Techno Apr 09 '20 at 08:12

0 Answers0