Vue js - reference variable in object

Question

I am new to vue and can't find a solution to this -

I have a JSON object here, and I am trying to dynamically fetch the "info" of a user based on their "userRegion".

{
"userData": {
    "kr": {
      "info": {
        "name": "testing-123",
     }
    },
    "any": null,
    "us": null,
    "eu": {
      "info": {
        "name": "testing-456",
     }
    },
  },
   "userRegion": "eu" 
}

I then have this object in vue and I want to dynamically change region and pull the data from the object based on this region value in the "user" object below.

 user:{ 
        region:  this.userData.userRegion,
        name: this.userData[this.user.region].info.name
    },

For example, I have tried using something like this

this.userData.userData[this.user.region]

but I get an error:

TypeError: Cannot read property 'region' of undefined"

the variable I am using "userData" is passed down from the parent like so:

<infoWindow :userData='userData'></infoWindow>

and is set as a prop:

props: {
        userData: app.userData,
     },

any help would be aprpeciated, thanks

poke · Accepted Answer · 2017-06-06 18:56:01Z

1

I don’t really understand where you are setting this user, whether its part of an initialized data object, or a computed property. However, there is a temporal issue there:

user: {
    region: this.userData.userRegion,
    name: this.userData[this.user.region].info.name
},

In order to set up user.name, user.region needs to be already there. But since you are creating the user object at once, this does not work. So you either have to split that up, or repeat the logic for the user region again:

user: {
    region: this.userData.userRegion,
    name: this.userData[this.userData.userRegion].info.name
},

answered Jun 6, 2017 at 18:56

poke

392k80 gold badges596 silver badges632 bronze badges

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

1 Comment

user3195250 Over a year ago

Sorry, forgot to explain it was from an api that returns the object! This worked perfectly though - thank you! And thanks for the explanation, it makes so much more sense now :)

Collectives™ on Stack Overflow

Vue js - reference variable in object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related