Vue cannot read property of undefined - Nested Object Access

Question

Vue is kicking an error in the console for "cannot read property (property name) of undefined". I've tried using v-if but still getting the error. It seems like the object doesn't exist or cannot be accessed like I have defined it, but I don't know why?

object defined in Vue as:

customerData:{
     address:{
          firstName:'',
          lastName:''
          }
     }

Html

 <div v-if="customerData.address.firstName">
      <input  v-model="customerData.address.firstName">
 </div>

What am I missing?

tony19 · Accepted Answer · 2022-07-16 02:45:44Z

1

It looks like you're referencing the data option in your directive binding, I think you should do :

<div >
  <input  v-model="address.firstName">
</div>

edited Jul 16, 2022 at 2:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 7, 2021 at 13:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

4 Comments

Don F Over a year ago

I just updated to clarify. object is "customerData.address.firstName"

Boussadjra Brahim Over a year ago

ok you should check the existence of parent object like v-if="customerData.address."

Don F Over a year ago

If I look at the object using {{customerData.address.firstName}} notation the value appears. However, the error is still being thrown in the console. I have tried with v-if and same result. Ill fire up a fiddle.

Don F Over a year ago

Thanks for your help on this. I was not able to replicate on fiddle (everything worked fine). I found the bug in the code which was caused the customerData object being overwritten by the response to a request when the page loaded. The "address" was not present in this response and therefore created the error.

Collectives™ on Stack Overflow

Vue cannot read property of undefined - Nested Object Access

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related