Vue предупреждение при доступе к вложенному объекту

Question

Я не уверен, почему я получаю предупреждение Vue при доступе к вложенному объекту.

{{ user.area.name }}

[Vue warn]: Ошибка при рендеринге: "TypeError: Невозможно прочитать свойство 'name' из undefined"

TypeError: Невозможно прочитать свойство 'name' из неопределенного

Просто доступ к объекту не имеет предупреждения.

{{ user.name }}

Любой совет?

Answer 1

Ваш user не содержит area, поэтому, когда вы пытаетесь прочитать это, это undefined.Вы не можете использовать оператор . для вещей, которые undefined, поэтому, когда вы делаете .name для этого, вы получаете ошибку, которую вы получили.

Answer 2

Полностью догадываясь, но давайте посмотрим, прав ли я ...

Скажем, у вас есть что-то подобное в вашем компоненте / экземпляре Vue data инициализатор ...

data () {
  return {
    user: {}
  }
}

и затем вы заполняете этот объект асинхронно, например,

mounted () {
  setTimeout(() => { // setTimeout is just an example
    this.user = {
      ...this.user,
      area: {
        name: 'foo'
      }
    }
  }, 1000)
}

Если ваш шаблон имеет

{{ user.area.name }}

, когда он изначально отображает до , асинхронная задача завершена, вы будете пытаться получить доступ к name свойству area, которое не определено.

Пример ~ http://jsfiddle.net/tL1xbmoj/

---

Возможны следующие варианты: *

1. Инициализация данных со структурой, которая не вызывает ошибок

   data () {
     return {
       user: {
         area: { 
           name: null 
         } 
       }
     }
   }
   

   Пример ~ http://jsfiddle.net/tL1xbmoj/1/

2. Использование условного рендеринга для предотвращения ошибки

   <span v-if="user.area">{{ user.area.name }}</span>
   

   Пример ~ http://jsfiddle.net/tL1xbmoj/2/