首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >axios返回数据无法加载vue列表渲染?

axios返回数据无法加载vue列表渲染?
EN

Stack Overflow用户
提问于 2018-01-19 18:40:54
回答 1查看 327关注 0票数 0

使用axios请求api接口,然后返回数据,但不能加载v-for来迭代对象的属性。

查看javascript文件:

代码语言:javascript
复制
var vm = new Vue({
        el: '#app',
        data: {
            movies: []
        },
        created() {
            this.getMovie();
        },
        methods: {
            getMovie: function () {
                axios.get("https://api.douban.com/v2/movie/top250")
                    .then(function (res) {
                        console.log(res.data.subjects);
                        this.movies = res.data.subjects;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        }
    })     

HTML文件:

代码语言:javascript
复制
<div id="app">
  <div class="content">
    <div class="title">
      <ul>
         <li v-for="(item,index) in movies">
            {{item.title}}
        </li>
       </ul>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我相信每个人都应该能够解决这个我的问题,但我不知道如何上传列表数据?查看jsfiddle在线代码调试工具:

enter link jsfiddle here

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-19 22:53:28

代码语言:javascript
复制
<ul v-if="movies.length > 0">
     <li v-for="(item,index) in movies">
        {{item.title}}
      </li>
</ul>

mounted() {
   this.getMovie();
},
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48339203

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档