CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
Ahmed
Ahmed

Reputation: 280

How to increase like count of unique button inside v-for in Vue js

Keep in mind that you should always try to handle state to control your ui.

<button v-bind:style='{color: isLiked(post.id)?"red":"white"}'></button>

I think the like button toggle is for a logined user.You should keep a likelist for the authenticated user.

new Vue({
  data:{
    posts:[],
    likeList:[]
  },
  methods:{
    async AddLike(id){
       let post = this.posts.find(post => post.id === id)
       await axios.post('/video/api/post/like', {post_id: id})
       .then(response => {
          console.log(response.data)
          let like = response.data;
          if(like){
            post.post_total_likes +=1
            this.likeList.push(id)
          }else{
            post.post_total_likes -=1
            let index = this.likeList.findIndex(item => item === id);
            if(index > -1){
              this.likeList.splice(index,1);
            }
          }
             
        })
        .catch(error => {
            console.log(error)
        })
    },
    isLiked(id){
      return this.likelist.includes(id);
    }
  }
})

Upvotes: 0

Views: 235

Answers (1)

gwl002
gwl002

Reputation: 752

async AddLike(id){
       let post = this.posts.find(post => post.id === id)
       await axios.post('/video/api/post/like', {post_id: id})
       .then(response => {
          console.log(response.data)
          let like = response.data;
          if(like){
            post.post_total_likes +=1
          }else{
            post.post_total_likes -=1
          }
             
        })
        .catch(error => {
            console.log(error)
        })
      
    }

Upvotes: 1

Related Questions