vue中如何实现点击按钮后加载更多数据

红太狼 2023-07-24 08:12 13阅读 0赞

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

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

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

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

created() { 
        this.getComments()
    }

1.  在 `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('获取评论数据失败！')
            }
        })
    }

1.  在页面中，通过 获取到的 `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 )楼  用户：{
       { item.user_name}}  发表时间：{
       { 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>

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

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