我是菜鸟,今天才发现这个问题。

Vue计算属性看似是一个函数,但实际上跟 data 更像。如果计算属性返回的是一个对象,并且在模板中读取了这个对象的属性,那就要保证开始时这个对象的属性一定要存在,下面是有问题的代码:

<header>{{ pageInfo.title }}</header>

...
computed: {
    pageInfo(){
        const mapPageInfo = {
            'index': {
                title: 'index page',
                subTitle: 'index subtitle'
            },
            'list': {
                title: 'list page',
                subTitle: 'list subtitle'
            }
        };

        return mapPageInfo[this.$route.path]
    }
}
....

上面的代码看起来没有问题,运行起来也是正常的,但实际上在控制台报错了:
cannot read property title of undefined...
原因就是 pageInfo 在刚开始的时候没有组件中读取的 title 属性。下面是正确的做法:
...
pageInfo(){
//保证属性一定是存在的
let pageInfo = {
title: '',
subTitle: ''
};
const mapPageInfo = {
...
}
....
return Object.assign(pageInfo, mapPageInfo[this.$route.path]);
}
...

End

标签: vue, 计算属性

添加新评论