Vue.js - error when rendering component

Question

The data is on firebase, and I want to show only 1 object with [objectNumber] see {{ligler[1].name}} in the template, but when I do this it works but I get errors:

Error when rendering component
Uncaught TypeError: Cannot read property 'name' of undefined

I think, the problem is that the data loaded before the component.

When I use v-for, it show the name off all objects without errors, but I only want to show one object.

The template looks like:

<template>
  <div id="app">
  <h1>{{ligler[1].name}}</h1>
  </div>
</template>

the script:

<script>
import Firebase from 'firebase'

let config = {
    apiKey: "xxxxxxxxxx",
    authDomain: "xxxxxxxxxx",
    databaseURL: "https://xxxxxxxxxx.firebaseio.com"
}

let app = Firebase.initializeApp(config);
let db = app.database();

let ligRef = db.ref('ligler');

export default {
  name: 'app',
  firebase: {
    ligler: ligRef
  }
}
</script>

I tried to add v-if to the h1, but that doesn't work.

How can I fix this errors?

what is the output of console.log(ligRef); ? put this line right before export — Marius Bogdan
– Marius Bogdan, Commented Jan 20, 2017 at 8:27
U {u: Te, path: L, m: ee, Nc: false, then: undefined…} is the output — Can
– Can, Commented Jan 20, 2017 at 8:36

Community · Accepted Answer · 2017-05-23 12:24:17Z

2

Put a null check like this:

<h1>{{ligler[1] && ligler[1].name}}</h1>

Using && or || are called logical operator short circuiting meaning they don't evaluate the right hand side if it isn't necessary. This is widely used due to it's brevity.

Here if ligler[1] is undefined, it will not evaluate ligler[1].name and you will not be getting the error, which is equivalent of putting a if before accessing the inside properties.

It makes more sense to use v-if if you have more component where you access other properties of ligler[1] as well, otherwise above code is better.

  <div v-if="ligler[1]">
    <h1>{{ligler[1].name}}</h1>
    <h1>{{ligler[1].age}}</h1>
    <h1>{{ligler[1].etc}}</h1>
  </div>

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jan 20, 2017 at 8:26

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Can Over a year ago

this works!!!! can you explain why I must add ligler[1] &&? Just to identify ligler?

Can Over a year ago

thanks!!! v-if="ligler[1]" is also working, which one is better to use?

Can Over a year ago

@Saurahbh, I have one question more.. in my data I have ligler[1].currentWeek and ligler[1].weeks how can I set currentWeek as variable to use this to show the current week in ligler[1].weeks?

str · Accepted Answer · 2017-01-20 08:37:22Z

1

Usually you can simplify this by using v-if:

<template>
  <div id="app" v-if="ligler[1]">
    <h1>{{ligler[1].name}}</h1>
  </div>
</template>

answered Jan 20, 2017 at 8:37

str

45.5k18 gold badges117 silver badges134 bronze badges

2 Comments

Can Over a year ago

this works! is this solution better then <h1>{{ligler[1] && ligler[1].name}}</h1> ?

str Over a year ago

@Can It depends. If the whole component depends on ligler[1] then use v-if, if it is only a small part of the component use &&.

Collectives™ on Stack Overflow

Vue.js - error when rendering component

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related