php二级评论怎么实现,用户评论功能设计[二]（实现回复功能）

在前面，我们已经是实现了用户评论功能以及评论的实时显示，现在，我们来实现一下，用户的回复功能。实现效果如下所示：

回复评论的流程

我们梳理一下评论回复流程：

用户点击评论，input框获取焦点，input框的placeholder变为回复 @nickname

用户输入评论内容，然后提交，向服务器发出请求

在页面渲染用户评论内容

细心的同学可能会发现，当回复成功后，顶部的xx条评论并没有进行更新，因为在页面显示时，我并没有将回复当作是评论来处理，所以数量并没有增加

回复功能逻辑实现

评论对象事件绑定

class="comment_li"

v-for="(item,index) in commentList"

:key="item.id"

@click="replyUser(item,index,-1)"

>...

复制代码

从上面的代码，可以看出，我们为每个评论对象绑定了一个replyUser(item,index,-1)的事件。那我们现在来看一下，我们在replyUser函数中做了什么事情

replyUser(item, index, index2) {

item.index = index; // 为每个评论对象绑定一个index属性，这个index的作用是为了帮助我们能更好的在commmentList中定位到该评论对象

item.index2 = index2; // index2的作用是为了帮助我们区分回复的级别。-1代表回复的是根评论，其他值表示回复的是别人的回复。

this.replyUserComment = item;//replyUserComment的作用是为了保存当前的评论对象，在data中定义

this.commentPlaceholder = `回复 @${item.nickname}：`;//修改placeHolder

this.$refs.content.focus(); //input框获取焦点

},

复制代码

经过上面的处理，我们已经取得了我们回复的评论对象。

对评论内容的处理

:placeholder="commentPlaceholder"

class="comment_input"

v-model="comment_text"

ref="content"

@click="checkComment"

/>