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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
将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
php中如何防止表单的重复提交
2013/08/02 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
express默认日志组件morgan的方法
2018/04/05 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
Python实现的RSS阅读器实例
2015/07/25 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
公关活动策划方案
2014/05/25 职场文书
酒后驾车标语
2014/06/30 职场文书
交通安全横幅标语
2014/10/07 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
全陪导游词开场白
2015/05/29 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python