In the last article, we have implemented the publishing function of comments. Now we want to realize the function of replying to comments. First, we need to know which comment you responded to. So we need the ID of the comment here. When we click on the comment, we can realize the reply of the comment. Here we use @click="reply(item)", put the method into methods, which is called item.id, and then we can get the ID of the comment. data in Vue defines a parameter, assigns item. ID to comment_id, the value of comment_id is empty at first, and then calls comment_id: vm.comment_id in the ret function parameter in UIChatBox.open.

data:{
    comment_id: null
}
methods: {
                reply: function (item) {
                    this.comment_id = item.id
                }
            }
            

The value of comment_id has been obtained here. When you reply, you should let the phone default keyboard pop up, input box or focus. UIChatBox.popupKeyboard() is used here. Then when you reply, you will usually reply with the comment of "somebody" or "@" to comment on the commentator, so, here is the user information to comment or have to comment, which is included in the data. Set a user variable and assign the item's user ID to the user, so to sum up, the code is as follows

data:{
                user: JSON.parse(localStorage.getItem('user')),
                comment_id: null,
                comments: []
            }，
methods: {
                reply: function (item) {
                    this.comment_id = item.id
                    UIChatBox.popupKeyboard();
                    UIChatBox.value({
                        msg: '@' + item.user.username + ' '
                    });            //Set the value of the input box
                }
            }

At this point, we have basically implemented the function of reply, the following is the complete code.

html
<div class="aui-content comment-list" id="app">
        <ul class="comment-list">
            <li class="item aui-padded-b-10" v-for="item in comments" @click="reply(item)">
                <div class="aui-row aui-padded-10">
                    <div class="aui-col-xs-2 img aui-padded-r-10" :class="item.user_id == user.id ? 'aui-pull-right' : ''">
                        <img src="../image/demo1.png" class="aui-img-round">
                    </div>
                    <div class="aui-col-xs-10 aui-padded-r-10" :class="item.user_id == user.id ? 'aui-text-right' : ''">
                        <p>{{item.user.username}} <span>role {{item.id}}</span></p>
                        <p>{{item.user.created_at}}</p>
                    </div>
                </div>
                <div class="message  aui-padded-r-15 ">
                    {{item.content}}
                </div>
            </li>
        </ul>
  
    </div>
js
apiready = function(){
        var id=api.pageParam.id;
        var UIChatBox = api.require('UIChatBox');

        var vm=new Vue({
            el:'#app',
            data:{
                user: JSON.parse(localStorage.getItem('user')),
                comment_id: null,
                comments: []
            },
            methods: {
                reply: function (item) {
                    this.comment_id = item.id
                    UIChatBox.popupKeyboard();
                    UIChatBox.value({
                        msg: '@' + item.user.username + ' '
                    });
                }
            },
            created:function(){
                var that=this;
                app.get('news/'+id + '/comments',function(data){
                    that.comments=data.data;
                    // console.log(data)
                },function(err){

                })
            }
        });


        // app.alert(localStorage.getItem('token'))
        
        UIChatBox.open({
            style:{
                indicator:{
                    target:'both'
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.eventType == 'send') {
                    //post to server interface
                    app.post('news/' + id + '/comments', {
                        comment_id: vm.comment_id,
                        content: ret.msg
                    }, function (data) {
                        vm.comments.push(data)
                        api.toast({
                            msg: 'Send successfully'
                        });
                        UIChatBox.closeKeyboard();
                        vm.comment_id = null
                    }, function (xhr) {
                        switch (xhr.status) {
                            case 422:
                                api.toast({
                                    msg: xhr.responseJSON.content[0]
                                });
                                break;
                        }
                    })
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
        

    };

Additionally, when we reply to other people's comments, the user's avatar of comments published by others is on the left, and the user's avatar of comments published by me is on the right. It's a bit like the chat interface of qq q and wechat. You can imagine the following, so here we have to judge whether the avatar in the list should be left or right. If the comment item.user_id equals user.id, it means I have published the following code here.

:class="item.user_id == user.id ? 'aui-pull-right' : ''"

Add the aui-pull-right style in the AUI framework when item.user_id == user.id is met, otherwise no aui-pull-right style is added.