代码之家 › 专栏 › 技术社区 › wen tian

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

vue.js javascript

0

wen tian · 技术社区 · 8 年前

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

查看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文件:

<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>

我相信每个人都应该能够解决我的问题,但我不知道如何向上加载列表数据ê¼ 查看JSFIDLE在线代码调试工具:

enter link jsfiddle here

1 回复 | 直到 8 年前

1

0

Georgi Antonov 8 年前

<ul v-if="movies.length > 0">
     <li v-for="(item,index) in movies">
        {{item.title}}
      </li>
</ul>

mounted() {
   this.getMovie();
},