Vue.js中如何提取含URL格式键的JSON对象值？

Got it, let's fix this issue where you can't access that Stripe customer ID from your Auth0 profile because of the slashes in the key name. Here are a couple of straightforward ways to handle it:

1. Directly Use Bracket Notation in Your Template #

Since the key contains special characters (slashes), you can't use the dot notation (getProfile.https://example.com/stripe_customer_id)—that's exactly why you're hitting the raw expression error. Instead, use bracket notation in your Vue template, which works for any valid string key:

<template>
  <v-card>
    <!-- Access the value directly with bracket notation -->
    <p>Stripe Customer ID: {{ getProfile['https://example.com/stripe_customer_id'] }}</p>
  </v-card>
</template>

2. Use a Computed Property for Cleaner Code #

If you want to keep your template tidy (especially if you need to use this value multiple times), create a computed property to extract the ID. This also lets you add fallback values or safely handle cases where getProfile might not be loaded yet:

<script>
export default {
  data() {
    return {
      getProfile: {} // Your Auth0 profile object here
    };
  },
  computed: {
    stripeCustomerId() {
      // Use optional chaining to avoid errors if getProfile is null/undefined
      return this.getProfile?.['https://example.com/stripe_customer_id'] || 'No ID found';
    }
  }
};
</script>

<template>
  <v-card>
    <p>Stripe Customer ID: {{ stripeCustomerId }}</p>
  </v-card>
</template>

Why This Works #

JavaScript object property names with special characters (like slashes, hyphens, or spaces) can't be accessed with dot notation—dot notation only works for valid identifiers (letters, numbers, underscores, and $). Bracket notation, however, accepts any string as a property key, which perfectly fits your Auth0 namespace-formatted field.

Since you can't modify the key name due to Auth0's namespace requirements, these methods let you work with the existing key without any hacks or workarounds.

内容的提问来源于stack exchange，提问作者Darwesh Singh