vue中怎么使用v-for动态刷新页面？

Question

vue页面已加载，使用axios获取数据，数据返回时动态渲染到页面中，请问这要怎么实现？

methods :

getList: function () {
    let $list = {};
    this.$axios.get('/api/movie/top250',{
      params: {
        start: 0,
        count: 10
      }
    }).then(response => {
      $list = response;
    }).catch(err => {
        alert('error');
    })

    return $list;
  }
  

computed: {

    list: function () {
      return this.getList()
    }
}

<template>

<div>
    <p v-for="(val,index) in list" :key="index">{{val}}</p>
</div>

</template>

Answer 1

getList返回的时候ajax还未执行完,所以返回的list就是空的
这里个人认为不应该用计算属性
应该在mounted里面调用getlist并设置data中list值

大概:

new Vue({
    ...
    data:{
        list:[]
    },
    mounted:function(){
        var _this = this;
        this.$nextTick(function(){
            _this.getList();
        });
    },
    methods:{
        getList:function(){
            var _this = this;
            ajax(...).then(function(data) {
                _this.list = data;
            });
        }
    }
});

Answer 2

computed的list并有变化。直接用data，然后给list赋值，如果还不清楚，我电脑上写个demo

Answer 3

定时器不能解决吗