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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
js随机生成一个验证码
Jun 01 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 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
FCKeditor添加自定义按钮
2008/03/27 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python3处理文件中每个词的方法
2015/05/22 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Windows下安装Scrapy
2018/10/17 Python
python文件选择对话框的操作方法
2019/06/27 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
CSS3实现时间轴特效
2020/11/02 HTML / CSS
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
考研英语复习计划
2015/01/19 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫