vue-resource拿不到数据啊急！

发布于 2022-09-04 05:01:35 字数 1446 浏览 10 评论 0

用的是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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魔法唧唧 2022-09-11 05:01:35

谢邀。
问题有三个，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>

回复收藏 0