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

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

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

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

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

created() {this.getComments()
}

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

在页面中，通过获取到的 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>

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

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

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

jq ajax 点击按钮异步加载更多
挺简单的异步加载代码都有备注! 流程挺简单的:查询数据库查出内容,写分页,前台输出,js异步请求服务器,控制器处理返回! 然后是按分页请求!每次请求几页这样.具体大伙去研究研究吧! // info/ ...
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
vue 2 滚动条加载更多数据实现
vue 2 滚动条加载更多数据实现解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上 ...
笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 1 data() { 2 return { 3 lo ...
微信小程序上拉加载加载更多数据触底加载点击加载更多数据
开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml  <view wx:for=&q ...
Vue向下滚动加载更多数据-scroll-案例
vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但"最vue"的方式肯定是 ...
vue 项目，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
点击按钮重新加载ajax,Jquery AJAX点击链接，然后重新加载页面
我审查了其他帖子和一些帮助我,但因为我不精通JQuery或AJAX,我想确保我正在做我需要正确的.Jquery AJAX点击链接,然后重新加载页面在我的主页(基本URL)上,我有2个不同的输出,基于 ...

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

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

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

最新文章

热门文章