vue制作加载更多功能的正确打开方式


Posted in Javascript onOctober 12, 2016

使用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两个函数用法没有搞清楚,如果你有更好的方法欢迎讨论。

Javascript 相关文章推荐
JavaScript中的View-Model使用介绍
Aug 11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 #Javascript
深入理解Node.js的HTTP模块
Oct 12 #Javascript
纯js实现手风琴效果代码
Apr 17 #Javascript
JavaScript 继承详解(六)
Oct 11 #Javascript
JavaScript 继承详解(五)
Oct 11 #Javascript
Javascript动画效果(4)
Oct 11 #Javascript
JavaScript中const、var和let区别浅析
Oct 11 #Javascript
You might like
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
html读出文本文件内容
2007/01/22 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
python实现连接mongodb的方法
2015/05/08 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
Linux机考试题
2015/07/17 面试题
项目管理计划书
2014/01/09 职场文书
学术会议主持词
2014/03/17 职场文书
老公保证书范文
2014/04/29 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
人事专员岗位说明书
2014/07/29 职场文书
会员卡清退活动总结
2014/08/27 职场文书
自主招生自荐信格式
2015/03/04 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
干部培训工作总结2015
2015/05/25 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
golang 实现时间戳和时间的转化
2021/05/07 Golang