Laravel отношения вызывают ошибки при достижении соответствующих свойств в Vue

Question

В контроллере Laravel у меня есть что-то вроде:

$entry = Entry::with('studio','user','user.operator','type', 'chef')
    ->find($entryId);

// return entry with database fields and relationships

Теперь в Vue (работает через Vuex и Ax ios):

1. Если я попытаюсь получить свойства элемента Entry, это будет прекрасно работать:

   {{!entry.occurred_at ? '-' : entry.occurred_at}}
   
   // output
   // 2017-09-03 16:45:46
   

2. Если я попытаюсь что-то выяснить из отношения класса Entry (которое я получено благодаря методу with ()) на один уровень тоже хорошо:

   {{!entry.user ? '-' : entry.user}}
   
   //output
   // { "id": 50, "username": "mihails.vankins", "change_password": 0, "logged_in_at": "2019-09-18 14:57:36", "deleted_at": false, "created_at": "2018-06-04 16:59:41", "updated_at": "2019-09-18 21:01:04" }
   

3.Но если я попытаюсь проникнуть более чем на один уровень в отношения, вот так:

 {{!entry.user.username ? '-' : entry.user.username }}

Я получаю правильный вывод, но в консоли я получаю сообщения об ошибках типа:

[Vue warn]: Error in render: "TypeError: _vm.entry.user is undefined"
TypeError: "_vm.entry.user is undefined"

Что я делаю неправильно?

Answer 1

Вы должны проверить так:

 {{(entry.user && entry.user.username) ?entry.user.username :'-'  }}

, если было больше уровней объекта, например:

{{ (entry.user && entry.user.fullname && entry.user.fullname.first && ...)   }}