CODEWITHSUNDEEP
vuejs2
OurBG
OurBG

Reputation: 597

Vue.js cannot read property of null/undefined before it's assigned

I have a property that comes from axios.get.

It's defined in my data as null (or '' or [])

The axios call is in a created hook.

When the app is first loaded the console fills up with 

 Error in render: "TypeError: Cannot read property 'service' of null"

Of course, it actually shows the information correctly on the webpage, because service is not null, but this error is apparently thrown before axios fetches the data.

What's the best approach here?

Upvotes: 2

Views: 13804

Answers (3)

Kapitan Teemo
Kapitan Teemo

Reputation: 2164

add a v-if in the element where you are using the data service.

Here is an example:

<label v-if="service">{{service}}</label>

or use the parent if it's an array like this:

<label v-if="parent">{{parent.service}}</label>

Upvotes: 4

Radu Diță
Radu Diță

Reputation: 14171

You can either initialize the data field with an empty, non null, value or guard the access using a v-if before the template using the property.

Upvotes: 3

Skipper
Skipper

Reputation: 396

You have to specify your data as an empty object to avoid this error:

    data: {
       your_object: {}
   }

Where your_object is that object that will have service property when data is loaded.

(From my assumption, in axios.get promise function you do something like that:

your_object.service = result.data;

)

Upvotes: 6

Related Questions