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在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
canvas 实现中国象棋
Feb 17 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 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实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue中activated的用法
2021/01/03 Vue.js
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
python中的列表推导浅析
2014/04/26 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Selenium定位元素操作示例
2018/08/10 Python
Django中的forms组件实例详解
2018/11/08 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python装饰器练习题及答案
2019/11/01 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python实现用户名密码校验
2020/03/18 Python
关于旷工的检讨书
2014/02/02 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
质量承诺书怎么写
2014/05/24 职场文书
入党培养人考察意见
2015/06/08 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python