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 = ''         }     })  }