Using variables with url constants in vue.js

Question

I'm trying to make something work with my vue app

I made constants.js file in which i just declare some of URLs I plan to recycle instead of rewriting them every time, but some of them require IDs of stuff

#Example of constant definined in constants.js
export const useVariables = `https://myapiserver.com/iNeedVar1Here/${var1}/iNeedVar2here/${var2}`

And now I want to use this constant in my vue app and pass the variables where I need them, before sending the actual request

getItem() {
            let var2 = this.formValues.item2;
            let var1 = this.formValues.item1;
            if (item != null) {
                axios.get(useVariables)
                    .then((res) => {
                        console.log(res.data)
                    })
                    .catch(err => console.log(err));
            }
            else {
                alert('Select an item before preceding')
            }

You should get this error var2 & var1 is used before its declare, which is illegal for const variables — Rohìt Jíndal
– Rohìt Jíndal, Commented May 19, 2022 at 14:14

Namysh · Accepted Answer · 2022-05-19 14:13:07Z

2

Your constant is static, it's not like a computed property or anything it's just a plain string so it won't work. Instead, you can create a function that will build and return the URL like this :

export const useVariables = (var1, var2) => `https://myapiserver.com/iNeedVar1Here/${var1}/iNeedVar2here/${var2}`

And then you can build the constant like this :

getItem() {
  let var2 = this.formValues.item2;
  let var1 = this.formValues.item1;
  if (item != null) {
    axios.get(useVariables(var1, var2))
      .then((res) => {
        console.log(res.data)
      })
      .catch(err => console.log(err));
  } else {
    alert('Select an item before preceding')
  }
}

answered May 19, 2022 at 14:13

Namysh

4,7972 gold badges11 silver badges19 bronze badges

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

Comments

Rohìt Jíndal · Accepted Answer · 2022-05-19 14:24:08Z

0

As per your current implementation, You will get the below error :

var1 was used before it was declare, which is illegal for const variables

var2 was used before it was declare, which is illegal for const variables

You have to pass these variables into a method and then have to return the concatenated string. You can give a try to this :

In some other utility file :

export function getAPIUrl(var1, var2) {
    return `https://myapiserver.com/iNeedVar1Here/${var1}/iNeedVar2here/${var2}`
}

In component :

import * as ApiUtil from '@/util/ApiUtil

axios.get(ApiUtil.getAPIUrl(var1, var2))
.then((res) => {
  console.log(res.data)
})
.catch(err => console.log(err));

edited May 19, 2022 at 14:24

answered May 19, 2022 at 14:19

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

Using variables with url constants in vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related