Vue cannot read property ‘xxx’ of undefined solutions

Problem scenario

Use {} text interpolation to display content through cascade. In the following code, foo returns through the back-end interface.
Before the back-end content returns, the console will not read the property ‘xxx’ of undefined.

<div>
  <h1>{{ foo.title }}</h1>
  <p>{{ foo.description }}</p>
</div>

Solution

<div>
  <h1 v-if="foo.title">{{ foo.title }}</h1>
  <p v-if="foo.description">{{ foo.description }}</p>
</div>

perhaps

<div>
  <template v-if="foo">
    <h1>{{ foo.title }}</h1>
    <p>{{ foo.description }}</p>
  </template>
</div>

perhaps

new Vue({
  foo: {
    title: '',
    description : ''
  },
  created(){
    // Calling the back-end interface
  }
})

Read More: