CODEWITHSUNDEEP
javascriptvue.js
thchp
thchp

Reputation: 2376

TypeError: trying to access 'property' on undefined

I'm stuck on a strange error: when trying to display a state variable, vuejs warns me: Error in render function: "TypeError: Cannot read property 'token' of undefined"

My state looks like this (in the vuejs extension):

room:Object
    details:Object
        game_id:"1"
        id:914527404
        max_users:5
        messages:Array[0]
        token:"ef6464692f4cce187fe129d7"
        user:Array[1]
    messages:Array[0]
    users:Array[1]

Despite the error, the HTML is still rendered correctly:

<button id="copySharingLink" type="button" class="btn btn-primary waves-effect waves-light" v-bind:data-token="room.details.token">some text</button>

becomes

<button id="copySharingLink" type="button" data-token="ef6464692f4cce187fe129d7" class="btn btn-primary waves-effect waves-light">some text</button>

I have no idea how to rid out of this error, since it's working.

Upvotes: 1

Views: 178

Answers (1)

Nathan Wailes
Nathan Wailes

Reputation: 12222

There may be a time when room or room.details is not yet set, and that may be when the error is getting thrown.

Try changing the code from this...

v-bind:data-token="room.details.token"

...to this:

v-bind:data-token="room.hasOwnProperty('details') ? room.details.token : ''"

Upvotes: 1

Related Questions