javascript - Vue提示setting a non-existent path "filelist" on a vm instance
高洛峰
高洛峰 2017-04-11 12:52:56
[JavaScript讨论组]

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();
        }}
});
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(3)
PHP中文网

getfilelist();是啥?

阿神

http://router.vuejs.org/zh-cn...

看官方文档吧

迷茫

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

var self = this
Vue.http.get('http://192.168.233.233/study/project/main.json').then(function (info) {
    self.info = info
}, errorCallback);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号