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

希望高手指点一二

解决方案

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

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

这篇关于javascript - vue更新组件的视图的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！