VueJs - using template strings inside the data function returns undefined

Question

When I'm trying to use Template strings inside the data function in vuejs but, it always returns undefined any idea how to solve this ?

I was trying to make a URL for an API call dynamic

Cheers,

  data() {
    return {
      baseUrl: `https://example.com/api/json?key=${this.key}`,
      key: "IzNDU2Nzg5MDEyMzQ1Njc"
    };
  }

Brady Holt · Accepted Answer · 2019-09-09 13:34:05Z

1

This is a JavaScript issue. If you run the following simple example in JavaScript you'll get a "is not defined" error (when running in strict mode).

{ a: `${b}`, b: "123" }
> VM246:1 Uncaught ReferenceError: b is not defined

You can't reference an adjacent variable ('key' in your example) in an object literal declaration.

You can use a Vue.je computed property for baseURL:

computed: {
  baseUrl() {
    return `https://example.com/api/json?key=${this.key}`;
  }
}

answered Sep 9, 2019 at 13:34

Brady Holt

2,9641 gold badge31 silver badges34 bronze badges

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

1 Comment

Thank you works like a charm, appreciate. so just for knowledge when you mentioned " This is a JavaScript issue " how can I deal with it in js ?

fh0592x · Accepted Answer · 2019-09-09 13:31:40Z

0

The data property cannot be made dynamic. Use a computed property like below:

computed: {
    baseUrl() {
        return `https://example.com/api/json?key=${this.key}`
    }
}

answered Sep 9, 2019 at 13:31

fh0592x

2862 silver badges8 bronze badges