vue中如何实现发表提交后默认到最新的数据显示

一、发表提交后默认到最新的数据显示

1. 在 data 中定义 pageIndex，默认为1，默认展示第一页数据。comments，默认为空，所有的评论数据。msg，默认为空，评论输入的内容，代码如下所示：

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

2. 在文本框 textarea 中，通过 v-model 进行双向数据绑定 msg。同时，在发表评论按钮中，通过 click 绑定 postComment 事件，代码如下所示：

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

3. 在 methods 中，定义 postComment 方法，发布评论。首先需要校验评论的内容是否为空，通过trim() 方法可以去除空格。如果this.msg.trim().length的值为0，说明评论的内容为空。在发布评论的时候，需要调用对应的接口信息，this.$route.params.id可以获取传递过来的 id 值，携带的参数是评论的内容，通过之前双向数据绑定的 msg 值去除空格。如果响应的状态码为 0，说明响应成功。我们可以拼接出一个最新的评论对象，然后调用数组的 unshift 方法， 把最新的评论，追加到 data 中 comments 的开头，然后再将 msg 的值设置为空，这样就能完美实现刷新评论列表的需求，发表提交后默认到最新的数据显示，代码如下所示：

// 发布评论
postComment () {
    // 校验评论的内容是否为空
    if (this.msg.trim().length === 0) {
        return Toast('评论的内容不能为空！')
    }

    // 发表评论
    this.$http.post('/api/postcomment/' + this.$route.params.id, {
        content: this.msg.trim()
    }).then((res) => {
        if (res.data.status === 0 ) {
            // 拼接出一个评论对象
            var cmt = {
                user_name: '匿名用户',
                add_tiem: Date.now(),
                content: this.msg.trim()
            };
            
            // 将最新提交的评论信息添加到所有的评论数据中，保证是最新最先展示的
            this.comments.unshift(cmt)
            this.msg = ''
        }
    })

}