Vue提示setting a non-existent path "filelist" on a vm instance

利维坦少女
  • 3.4k

Vue提示
vue.js:1023 [Vue warn]: You are setting a non-existent path "filelist" on a vm instance. Consider pre-initializing the property with the "data" option for more reliable reactivity and better performance.

相关代码:

var Maincontent = Vue.extend({
    template: '#maincontent-template',

    route: {
        data: function() {
            return getfilelist();
        }}
});

期望是每次进入这个页面的时候,都重新请求这个函数拿新数据,感觉写在router中流程正确。


补充代码:

数据请求:

function getfilelist() {
    var info = Vue.http.get('http://192.168.233.233/study/project/main.json').then(successCallback, errorCallback);
    return info;
}


function successCallback(resp) {
    var infobody = resp.body;
    console.log(infobody);
    return infobody;
}

function errorCallback(resp) {
    console.log(resp);
}

请求的数据main.json

{
    "filelist": [
        {
            "id": 1,
            "pid": 0,
            "is_dir": 1,
            "filename": "dir1",
            "status": "正常",
            "size": 0,
            "modified_time": 1473746493
        }, {
            "id": 2,
            "pid": 0,
            "is_dir": 1,
            "filename": "dir2",
            "status": "正常",
            "size": 0,
            "modified_time": 1471069450
        }, {
            "id": 3,
            "pid": 0,
            "is_dir": 0,
            "filename": "file3",
            "status": "正常",
            "size": 300,
            "modified_time": 1473746492
        }, {
            "id": 4,
            "pid": 0,
            "is_dir": 0,
            "filename": "file4",
            "status": "正常",
            "size": 4000,
            "modified_time": 1471073051
        }, {
            "id": 5,
            "pid": 0,
            "is_dir": 0,
            "filename": "file5",
            "status": "正常",
            "size": 5,
            "modified_time": 1473747854
        }
    ]
}

请问如何解决?


已有的尝试:

试过在组件的data里直接写return getfilelist();,结果数据渲染不出来。

var Maincontent = Vue.extend({
    template: '#maincontent-template',
    data: function() {
        return getfilelist();//数据渲染不出来
    }
});

建立空对象也依旧报错

var Maincontent = Vue.extend({
    template: '#maincontent-template',
    data: function() {
        return {};//仍然报错
    },
    route: {
        data: function() {
            return getfilelist();
        }}
});
回复
阅读 3.9k
3 个回答

getfilelist();是啥?

getfilelist 返回的是空的,数据还没请求回来呢,数据只有在successCallback里才有。
大概要这么写:

var self = this
Vue.http.get('http://192.168.233.233/study/project/main.json').then(function (info) {
    self.info = info
}, errorCallback);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏