如何在 Vue js 中增加 v-for 中唯一按钮的点赞数

Question

请记住，您应该始终尝试处理状态以控制您的 ui。

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

我认为点赞按钮切换是针对已登录的 user.You 应该为经过身份验证的用户保留一个喜欢列表。

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);
    }
  }
})

Answer 1

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)
        })
      
    }

如何在 Vue js 中增加 v-for 中唯一按钮的点赞数

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

vue.js

vue-component

vuejs2

vuetify.js