vue.js - vue-resource拿不到数据啊 急!
本文介绍了vue.js - vue-resource拿不到数据啊 急!的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
用的是http://cnodejs.org/api的接口
如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
topicList:[],
getTopicListUrl: 'http://cnodejs.org/api/v1/topics',
},
ready:function(){
this.getTopic()
},
methods:{
getTopic:function(){
var that = this;
that.$http({
method:'GET',
url:getTopicListUrl
}).then(function(response){
that.$set('topicList',response.data)
},function(error){
//error
})
}
}
})
</script>
</html>
解决方案
谢邀。
问题有三个,ready
在v2中已经被取消了,可以参考Options-Lifecycle-Hooks,可以修改成created
;url:getTopicListUrl
这里赋值url
需要从实例中来,修改成this.getTopicListUrl
;获取数据后设置值这里不是很理解,你实例化的时候存在一个topicList
,所以可以直接赋值this.topicList = response.data.data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="topic in topicList"> {{topic.title}} </li>
</ul>
</div>
</body>
<script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
topicList:[],
getTopicListUrl: 'http://cnodejs.org/api/v1/topics',
},
created: function(){
this.getTopic()
},
methods:{
getTopic:function(){
var that = this;
that.$http({
method:'GET',
url:this.getTopicListUrl
}).then(function(response){
this.topicList = response.data.data;
},function(error){
//error
})
}
}
})
</script>
</html>
这篇关于vue.js - vue-resource拿不到数据啊 急!的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文