使用vue做類(lèi)似于微信點(diǎn)贊的效果？

遇到這么個(gè)問(wèn)題：
如圖：

多條朋友圈，當(dāng)我點(diǎn)贊時(shí)，當(dāng)前的這條朋友圈給我追加用戶(hù)，點(diǎn)贊數(shù)量也相應(yīng)地增加，再次點(diǎn)擊點(diǎn)贊時(shí)就是取消點(diǎn)贊也就相應(yīng)地刪除這個(gè)點(diǎn)贊用戶(hù)名字，點(diǎn)贊數(shù)量也相應(yīng)減少。

這個(gè)該怎么做呀？？

代碼如下：

<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">展開(kāi)</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>

                    <!-- 九張圖片，當(dāng)為4張圖片時(shí)加樣式名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>

                    <!-- 九張圖片，當(dāng)為4張圖片時(shí)加樣式名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>
                                回復(fù)
                                <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>

點(diǎn)擊點(diǎn)贊事件的函數(shù)：

在此謝過(guò)，麻煩了