Vue - данные компонента загружены из неопределенного состояния

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

Проблема видна: когда компонент загружен, контактные данные еще не вычислены.

Я получаю ошибку только при непосредственном доступе к URL /message/5. Когда он вызывается через какой-то <router-link>, у меня нет этой ошибки.

Я не знаю, является ли установка пользователя по URL лучшей альтернативой. Это лучшая альтернатива?

Есть идеи, как запустить приложение без этой ошибки? Я маленький перфекционист:)

Answer 1

Один простой / глупый способ избежать ошибки - использовать: если блокировать и рендерить только тогда, когда у него есть контакт, если у него нет контакта, визуализировать какое-либо сообщение для пользователя как загрузка

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