current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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?

share|improve this question
    
what is the output of console.log(ligRef); ? put this line right before export – Marius Bogdan Jan 20 at 8:27
    
U {u: Te, path: L, m: ee, Nc: false, then: undefined…} is the output – Can Jan 20 at 8:36
up vote 1 down vote accepted

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>
share|improve this answer
    
this works!!!! can you explain why I must add ligler[1] &&? Just to identify ligler? – Can Jan 20 at 8:37
    
thanks!!! v-if="ligler[1]" is also working, which one is better to use? – Can Jan 20 at 8:43
    
@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? – Can Jan 20 at 8:59
up vote 1 down vote

Usually you can simplify this by using v-if:

<template>
  <div id="app" v-if="ligler[1]">
    <h1>{{ligler[1].name}}</h1>
  </div>
</template>
share|improve this answer
    
this works! is this solution better then <h1>{{ligler[1] && ligler[1].name}}</h1> ? – Can Jan 20 at 8:40
    
@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 &&. – str Jan 20 at 8:46
    
thanks! you're awesome – Can Jan 20 at 8:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.