自己写一个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
。