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

问题描述

问 题

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>

解决方案

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;
            });
        }
    }
});

这篇关于vue.js - vue中怎么使用v-for动态刷新页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！