首页 > vue更新组件的视图的问题

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,这个是为什么呢?和视图不更新有没有关系呢?

希望高手指点一二


  1. 更新元素用$set方法或者内置的变异方法

  2. 因为在setTimeout里,this所指向的环境是window,而不是通过vue构造的实例对象,所以返回undefined

【热门文章】
【热门文章】