vue制作加载更多功能的正确打开方式
更新时间：2016年10月12日 08:51:48 作者：zhoou
这篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，以及编写过程中自己的错误写法，分享给大家，帮助读者更好的理解Vue.js中的一些设计思想。
使用vue制作加载更多功能，通过ajax获取的数据往data里面push经常不成功，原因是push是往数组中追加数据内容的，而不能用作数组之间的拼接，ajax获取的数据就是数组形式的，因此不成功，应该使用concat()拼接两个数组。
//这是错误的写法
$.ajax({
type:'get',
async:false,
url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2',
dataType: "json",
success: function(msg){
_self.$set('loadMore', msg);
_self.conList.push(_self.loadMore);
}
});
//这是正确的写法
$.ajax({
type:'get',
async:false,
url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2',
dataType: "json",
success: function(msg){
_self.$set('main',_self.main.concat(msg))
}
});
模拟ajax数据加载测试地址：https://jsfiddle.net/zhoou/96mnckgL/
总结：还是自己js基础知识不扎实，push和concat两个函数用法没有搞清楚，如果你有更好的方法欢迎讨论。
相关文章
增删改查是我们写项目百分之七十会遇到的代码,下面这篇文章主要给大家介绍了关于vue前端实现表格数据增查改删功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
vite是VUE3创建项目的工具,项目大了之后,性能明显优于webpack,下面这篇文章主要给大家介绍了关于vite构建vue3项目的相关资料,需要的朋友可以参考下2023-01-01
组件化是为了方便代码复用，提高开发效率。今天脚本之家小编给大家分享常见的vue组件写法四种，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
在开发webapp的时候总是会受到首屏加载时间过长的影响，越来越多的APP采用了“骨架屏”的方式去提升用户体验。这篇文章主要介绍了Vue页面骨架屏的实现方法,感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要为大家详细介绍了vue手写加载动画项目，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本文主要介绍了五分钟教你使用vue-cli3创建项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue获取DOM的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue如何封装Axios的get、post请求，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了VUE使用canvas实现签名组件，兼容PC移动端，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
下面小编就为大家分享一篇vue.js移动数组位置,同时更新视图的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论