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的面向对象(二)
Nov 09 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
详解puppeteer使用代理
Dec 27 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
vue实现简单瀑布流布局
May 28 Javascript
JavaScript中window和document用法详解
Jul 28 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
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python迭代和迭代器详解
2016/11/10 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python读取指定日期邮件的实例
2019/02/01 Python
浅析python的Lambda表达式
2019/02/27 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
标准自荐信范文
2014/01/29 职场文书
环保倡议书怎么写
2014/05/16 职场文书
奥运会口号
2014/06/13 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
个人工作能力自我评价
2015/03/05 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫