vue发布评论

首先晒一下接口：

新闻评论的列表
        接口地址:http://wx.wmh920.com/index.php/Mz/commentList
        请求方式:POST
        请求数据:接收新闻的raid,分页的page
        返回数据:data
                list:评论的列表(二维数组)
                    vname   :会员姓名
                    head_url:会员头像
                    rtime   :评论的时间
                    zancount:该条评论被赞的次数
                    content :评论内容
                count:新闻评论的总数

<div class="all">全部评论</div>

                    <textarea :placeholder="'已有'+data.pinglun+'条评论，快来说说你的'" class="replaycontent"></textarea><button type="button" class="mui-btn tijiao" @click="submit123($event)">提交</button>

     // 评价列表,需要循环与刷新

  <div class="fbjbox2">
                <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">
                  <div v-for="item in db" >
                   <div class="zce">
                    <img :src="item.head_url"  class="man"/>
                    <div class="cont">
                         <h5>{{item.vname}}</h5>    
                         <h4>{{item.content}}</h4>
                         <div class="mui-clearfix comment_end">
                             <span class="mui-pull-left">{{item.rtime|timeago}}</span>
                             <span class="mui-pull-right" style="padding-left:20px;width:70px;display:inline-block"><img v-bind:src="'img/bar2/'+zan_coment+'.png'"  width="18px" @click="zanComment(item,$event)"/>{{item.zancount}}</span>
                         </div>
                  </div>
                 </div>
                 </div>
               </pull>
           
    
       <div class="close" @tap="showpopover=false">
        <img src="img/close.png" style="width:20px;height:20px;"></div>
      <div class="clear"></div>
        
    </div>

</div>

data(){
        return{
            id:0,
            data:[],
            list:[],

}

}

methods:{

    shuaxin(done) {
                this.$api('Mz/commentList', {raid:this.$route.params.raid, page:0}).then(db => {
                    this.db=db.list;
                    done();
                });
            },
            next(done) {
                var page = this.db.length;
                this.$api('Mz/commentList', {raid:this.$route.params.raid, page }).then(db => {
                    if ((db.list||[]).length == 0) return done(true);
                    this.db = this.db.concat(db.list);
                    done();
                });
            },

//回复
       submit123: function(e){  //回复评论
             var content=$(e.srcElement).siblings(".replaycontent").val();
                 this.$api("Mz/sentComment" , { content,raid:this.$route.params.raid}).then(data => {                   
                    this.db.unshift(data);  //回复的内容是content  ，把content传给后台，然后后台再给我们，也就是data的内容。this.db是原来的评论列表，在这个 在开头添加是unshift
                    $(e.srcElement).siblings(".replaycontent").val(" ");       //添加到页面以后再把评论的输入框清空
                    this.data.pinglun++;
                    mui.toast('回复成功');
                });
        },
    

  }