Question

我在router/index.js中有以下路线：

routes: [
    {
        path: '/painel',
        component: Panel,
        meta: {
            auth: true
        },
        children: [
            {
                path: '/mensagem/:userId',
                name: 'panel.message',
                component: Message
            }
        ]
    }
]

这是我的消息组件：

<template>
    <div class="container">
        <div class="head">
            <div class="left">
                <div class="image" :style="{ 'background-image': 'url(' + contact.avatar + ')' }"></div>
                <div class="infos">
                    <div class="name">{{ contact.name }}</div>
                    <div class="company">{{ contact.company }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import router from '../../router';
    import {mapGetters} from 'vuex';

    export default {
        name: 'Message',
        computed: {
            ...mapGetters(['getContacts']),
            contact() {
                return this.getContacts.find(obj => {
                    return obj.id == router.currentRoute.params.userId;
                });
            }
        }
    }
</script>

getContacts获取器从状态返回所有联系人：

export const getContacts = (state) => state.contacts;

调用该组件时，我在控制台上看到以下错误：

1. [Vue warn]: Error in render: "TypeError: Cannot read property 'avatar' of undefined"
2. TypeError: Cannot read property 'avatar' of undefined
3. Error in mounted hook: "TypeError: Cannot read property 'id' of undefined"
4. Cannot read property 'id' of undefined

问题很明显：加载组件时，尚未计算联系数据。

仅在直接访问/message/5 URL时出现错误。通过某些<router-link>调用它时，我没有此错误。

我不知道通过url设置用户是否是最佳选择。是最好的选择吗？

有什么主意，我该如何运行该应用程序而不会出现此错误？我是一个完美主义者：）

Answer 1

一种避免错误的简单/愚蠢的方法是使用：if阻止并仅在有联系时进行呈现，如果没有联系则在加载时向用户呈现一些消息

<div class="infos" :if="contact">
                    <div class="name">{{ contact.name }}</div>
                    <div class="company">{{ contact.company }}</div>
                </div>

Vue-从状态未定义加载的组件数据

1 个答案: