javascript - vue更新组件的视图的问题
本文介绍了javascript - vue更新组件的视图的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
自己写一个vue的组件,打算在一开始用ajax请求数据并且更新组件视图,结果发现组件视图并没有同步更新...
var MyComponent = Vue.extend({
template: '#indexpage',
data: function() {
return {
show1: true,
article:[]
}
},
ready:function(){
console.log("hello created");
var that = this;
reqwest('/getsomearticle', function (data) {
console.log(data);
// var mydata=JSON.stringify(data);
console.log(data[0]);
for (var i = 0; i < 5; i++) {
that.article[i]=data[i];
}
console.log("article",that.article);
});
setTimeout(function(){console.log(that.article)},3000);//
setTimeout(function(){console.log(this.article)},3000);//underfined
// that.article=[{title:"this is a title",content:"this is a content"},{title:"this is a title",content:"this is a content"}];
},
//...other code
}
还有一个奇怪的事情是:
我写了两个settimeout的打印用来测试,奇怪的是第二个总是输出underfined,这个是为什么呢?和视图不更新有没有关系呢?
希望高手指点一二
解决方案
更新元素用
$set
方法或者内置的变异方法因为在setTimeout里,
this
所指向的环境是window
,而不是通过vue构造的实例对象,所以返回undefined
。
这篇关于javascript - vue更新组件的视图的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文