一、点击按钮后加载更多的数据显示

1. 在 data 中，定义 pageIndex，默认为 1 ，默认展示第一页数据。定义 comments，默认为空数组，里面保存所有的评论数据，代码如下所示：

data() {
    return {
        pageIndex: 1, 
        comments: []
    }
}

2. 在 created() 生命周期函数中，调用 getComments() 方法，获取评论的数据，代码如下所示：

created() {
    this.getComments()
}

3. 在 methods 中，定义 getComments() 方法，调用对应的接口，拼接传入 id 和 pageindex 的值。如果响应的状态码正确，那么就进行赋值给 comments。 每当获取新评论数据的时候，让老数据拼接上新数据，通过 concat 进行拼接，代码如下所示：

// 获取评论数据的方法
getComments() {
    this.$http.get('/api/getcomments/'+ this.id +'?pageindex='+ this.pageIndex).then((res) => {
        if (res.data.status === 0) {
            this.comments = this.comments.concat(res.data.message)
        } else {
            Toast('获取评论数据失败！')
        }
    })
}

4. 在页面中，通过 获取到的 comments 数据，进行相应的数据渲染。同时，在加载更多的按钮上，绑定点击的 click 事件，绑定 getMore() 事件，实现加载更多的数据，代码如下所示：

<div class="cmt-container">
    <h3>发表评论</h3>
    <hr/>
    <textarea placeholder="请输入要吐槽的内容，最多120个字" maxlength="120" v-model="msg"></textarea>
    
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <div class="cmt-list">
        <div class="cmt-item" v-for="(item,i) in comments" :key="i">
            <div class="cmt-title">
                第( i+1 )楼&nbsp;&nbsp;用户：{{ item.user_name}}&nbsp;&nbsp;发表时间：{{ item.add_time | dataFormat}}
            </div>
            <div class="cmt-body">
                {{ item.content === 'undefind' ? '此用户很懒，什么都没有说' : item.content}}
            </div>
        </div>
    </div>

    <mt-button type="danger" size="large" plain @click="getMore()">加载更多</mt-button>
</div>

5. 在 methods 中，定义 getMore() 事件，pageIndex 的值会自增，同时调用 this.getComments() 方法，进行数据的请求，这样就实现了点击后加载更多的数据，代码如下所示：

// 加载到更多的数据
getMore() {
    this.pageIndex++;
    this.getComments()
}