使用vue做类似于微信点赞的效果？

Question

遇到这么个问题：
如图：

多条朋友圈，当我点赞时，当前的这条朋友圈给我追加用户，点赞数量也相应地增加，再次点击点赞时就是取消点赞也就相应地删除这个点赞用户名字，点赞数量也相应减少。

这个该怎么做呀？？

代码如下：

<div class="box" v-for="v in data">
                <div class="PerInfo">
                    <img src="../image/pic.png" alt="" v-if="v.headimgurl == '' || v.headimgurl == null || v.headimgurl == undefined">
                    <img :src="v.headimgurl" alt="" v-else>
                    <div class="info">
                        <p>{{v.nickname}}</p>
                        <p>{{v.last_reply_at | getDate}}</p>
                    </div>
                </div>
                <div class="msg container" :class="fold ? 'fold' : 'unfold'" v-if="v.content !== ''">
                    {{v.content}}
                </div>
                <div class="show" @click='handleFold' v-show="fold">展开</div>
                <div class="show" @click='handleFold' v-show="!fold">收起</div>

                <div v-if="v.thumb[0].url !== ''">
                    <!-- 一张图片 -->
                    <div class="cell" v-if="v.thumb.length == '1'">
                        <img :src="v.thumb.url+'?x-oss-process=image/resize,p_50'" alt="">
                    </div>

                    <!-- 九张图片，当为4张图片时加样式名cell4 -->
                    <div class="cell9 cell4" v-if="v.thumb.length == '4'">
                        <div class="item" v-for="item in v.thumb">
                            <img :src="item.url+'?x-oss-process=image/resize,p_50'" alt="">
                        </div>
                    </div>

                    <!-- 九张图片，当为4张图片时加样式名cell4 -->
                    <div class="cell9" v-else>
                        <div class="item" v-for="item in v.thumb">
                            <img :src="item.url+'?x-oss-process=image/resize,p_50'" alt="">
                        </div>
                    </div>
                </div>

                <div class="nav">
                    <div class="share"></div>
                    <div class="love" @click="givePoint(v.id,v.nickname)">{{v.like}}</div>
                    <div class="comment">{{v.rew}}</div>
                </div>

                <div class="reply" v-if="v.like_member && v.rewlist">
                    <div class="lovePerson" v-if="v.like_member">
                        <em></em>
                        <span>{{v.like_member}}</span>
                    </div>
                    <ul class="reply_box" v-if="v.rewlist">
                        <li v-for="(vv, index) in v.rewlist" v-if="index < 5">
                          <div v-if="vv.replier == ''">
                            <div class="lf">
                                <span class="name">{{vv.nickname}}<em>楼主</em>:</span>
                            </div>
                            <div class="lf">{{vv.content}}</div>
                          </div>
                          <div v-else>
                            <div class="lf">
                                <span class="name">{{vv.replier.nickname}}</span>
                                回复
                                <span class="name">{{vv.nickname}}:</span>
                            </div>
                            <div class="lf">{{vv.content}}</div>
                          </div>
                        </li>
                    </ul>
                    <div class="checkAll" v-if="v.rewlist.length > 5" @click="goDetail(v.id)">查看全部{{v.rewlist.length}}条留言</div>
                </div>
                
            </div>

点击点赞事件的函数：

在此谢过，麻烦了

Answer 1

假如你的朋友圈列表的结构是如下：

[{
    author: 'xxx',
    imgList: [],
    time:'',
    commentList:[]
    praiseList:[{
        username: 'XXX',
        userid: ''
    }]
}]

点赞后把当前用户的{username: 'XXX',userid: ''},push进这个praiseList

v-for上 @click="givePoint(v)"

givePoint(item){
    var praiseIndex = -1
    item.praiseList.forEach((praise,index)=>{//查找我在不在点赞列表里
        if(myid === praise.userid){
            praiseIndex = index
        }
    })
    if(praiseIndex !== -1){//如果在则取消点赞
        item.praiseList.splice(praiseIndex,1)
    }else{//如果不在则点赞
        item.praiseList.push({username: 'XXX',userid: ''})
    }
}

至于点赞数量就很简单了 item.praiseList.length

Answer 2

说个思路吧

1. 组件关系 : thumb button (对应点赞按钮部分) thumb pannel(对应显示点赞用户名部分)
2. 事件触发 : thumb cancel thumb 可以在共同的父组件内处理两个事件，进行跨组件的数据传递
3. 显示逻辑 : thumb pannel 遍历一下props 中的用户对象列表就行了