标签 计算属性 下的文章

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

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