Question

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

我相信每个人都应该能够解决这个问题，但我无法弄清楚如何加载列表数据？查看jsfiddle在线代码调试工具：

enter link jsfiddle here

Answer 1

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

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

axios返回数据无法加载vue列表呈现？

1 个答案: