Vue.js中JSON对象的值

Question

I'm using Auth0 , Vue.js , Vuetify , and Stripe .

Relevant code:

JSON Object (I've blanked out unrelated values)

{ "sub": "", "given_name": "", "family_name": "", "nickname": "", "name": "", "picture": "", "gender": "", "locale": "", "updated_at": "", "https://example.com/stripe_customer_id": "cus_id" }

HTML:

<v-chip disabled>{{ getProfile.https://example.com/stripe_customer_id }}</v-chip>
<v-chip disabled>{{ getProfile.nickname }}</v-chip>
<v-chip disabled>{{ getProfile.gender }}</v-chip>
<v-chip disabled>{{ getProfile.locale }}</v-chip>
<v-chip disabled>{{ getProfile.updated_at }}</v-chip>

As you'd expect, the first line doesn't work due to the HTML link format (specifically, the forward slashes). Is there a way to extract the value of that field?

Unfortunately, the key must be in namespace format due to Auth0 rules (tokens retrieved from Auth0 will omit any added fields that aren't formatted that way. I'm using an Auth0 rule to create the Stripe customer post-registration (if that's at all relevant).

I've tried a few things and all of them result in a raw expression error. Not sure what to try next.

So, is there any way to easily extract that value? Thanks in advance!

Answer 1

Use

getProfile['https://example.com/stripe_customer_id']

To access the keys having dots or / . Any js object's property can be access with object.['key']