http://qieban.cn
做完设计,找切版网
QQ:6135833
微信:dingxiangming82
2017年12月21日
本文就“vue通过ajax获取数据问题解决方案”展开讨论,作者切版网,发布于2017年12月21日 全文共1074个字,预计阅读时长3分34秒。
在切版近期的一个VUE开发前端外包项目中碰到的问题,这个是继未来教育h5项目(vue)等之后的又一个vue开发项目,项目用到了vue以及jquery的ajax用来获取数据,然后碰到不能正常赋值的问题,最后原因竟然是这样:
看下例:
<script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _self.data=eval("(" + data +")"); }) /* this.$http.get(url).then(function(data){ var json=data.body; this.data=eval("(" + json +")"); },function(response){ console.info(response); })*/ } }); </script>
这里必须设置 vue的data的初始数据,即使此时数据为空。
在使用ajax获取数据时,使用vue-resource 更加合适。
使用vue-resource代码如下:
<script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; this.$http.get(url).then(function(data){ var json=data.body; this.data=eval("(" + json +")"); },function(response){ console.info(response); }) } }); </script>
这里我们看到设置VUE实例数据时,直接使用 this.data 就可以设置vue的数据了。
使用jquery的时候,代码如下:
<script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, beforeCreate:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _self.data=eval("(" + data +")"); }) } }); </script>
这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用,这样使用起来没有vue-resource方便。
文章为原创或者来自于互联网,转载请注明来源,如果文章有侵权请联系,我们会及时删除。
1. 利用CSS Sprites技术来减少HTTP请求的数量。 2. 对于能使用CSS实现的效果,尽量避免使用 […]
发布时间:2022年08月27日 标签:echarts
摘要:项目中因为需求,底部的导航栏是自己写的,在开发者工具中一切正常但是在真机上页面滑动时,的层级比高,调过两 […]
发布时间:2022年04月14日
这是一款绿色的提高用户体验的js插件,可以放心使用。为什么使用?解决触发元素的 click 事件延迟300ms […]
发布时间:2021年12月6日 标签:建站, 网站建设, 跨屏
根据艾瑞网的统计,早在2014年中国移动互联网市场规模为2134.8亿元,突破千亿元大关,同比增长115.5% […]
跨屏版网站有很多种说法,比如响应式网站、自适应网站等等,我们暂且叫“跨屏版”,是因为它和 电脑版,触屏版等有一 […]
发布时间:2021年12月6日 标签:建站, 网站建设, 跨屏, 适配
跨屏网页设计是近几年来广为流行的方式,跨屏建站方案替代了传统的多屏建站方案,多屏建站即为不同的终端单独建立一个 […]