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

Question

请记住，您应该始终尝试处理状态来控制您的用户界面。

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

我认为点赞按钮切换是针对登录用户的。您应该为经过身份验证的用户保留一个likelist。

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