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 相关文章推荐
jquery插件制作教程 txtHover
Aug 17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
基于Node.js的大文件分片上传示例
Jun 19 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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python中的字典使用分享
2016/07/31 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
虚拟机下载python是否需要联网
2020/07/27 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
法律进企业活动方案
2014/03/04 职场文书
大学生个人学习总结
2015/02/15 职场文书