vue.js - vue中怎么使用v-for动态刷新页面?
本文介绍了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屋!
查看全文