How to Convert String to Variable Name in Vue JS

Question

hope you are all doing great. I want to know is there any way we can convert string to a variable name? I want to convert "minXLabel" to minXLabel and use it inside span tags like this <span>{{minXLabel}</span> I have

        <div class="placeholder-value">
         <span>{{  inputsArray[index].firstOption || placeholder[index].first}} - </span> 
         <span>{{  inputsArray[index].secondOption || placeholder[index].second}}</span> 
       </div>

and the input array is

 inputsArray : [
        { 'firstOption': "minXLabel", 'secondOption': "maxXLabel" },
        { 'firstOption': "minXLabel", 'secondOption': "minYLabel" },
        { 'firstOption': "maxYLabel", 'secondOption': "maxXLabel" },
        { 'firstOption': "maxYLabel", 'secondOption': "minYLabel" }
      ],

I can do that manually with <span>{{ minXLabel || placeholder[index].first}} - </span> but because I want to output in a loop with different keys I need to convert that string into a variable name.

Jorge Cordero · Accepted Answer · 2021-10-21 15:14:33Z

1

You can transform a string to variable using eval function, something like this

 const inputsArray = [
    { 'firstOption': "minXLabel", 'secondOption': "maxXLabel" },
    { 'firstOption': "minXLabel", 'secondOption': "minYLabel" },
    { 'firstOption': "maxYLabel", 'secondOption': "maxXLabel" },
    { 'firstOption': "maxYLabel", 'secondOption': "minYLabel" }
  ]

  const iterator = inputsArray.values()

  for (let item of iterator) {
    const variableName = eval(item.firstOption);
    console.log(variableName)
  }

However, these variables will not be declared, you can assign value if you want for example inputsArray[index].firstOption || placeholder[index].first and then use the variable.

However, looks a little redundant that you try to assign a value that you already have to a new variable. For me, your first approach is correct just loop over your array and render the info there

<div v-for="item in placeholder">
  <div v-for="input in inputsArray" class="placeholder-value">
     <span>{{  input.firstOption || item.first}} - </span> 
     <span>{{  input.secondOption || item.second}}</span> 
  </div>
</div>

answered Oct 21, 2021 at 15:14

Jorge Cordero

1901 silver badge7 bronze badges

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

3 Comments

Sanan Ali Over a year ago

eval() is not available inside {{ }}

Jorge Cordero Over a year ago

You are using Vue, you can create a function to use JS code, assign the variable(s) there and just render in a loop the variable in your HTML, is not a good practice to have all the logic inside of your {{}}

Sanan Ali Over a year ago

Before asking question I have tried to store all the values in a data(){} function but the values I want to display here are preview of another component. This means if I change those inputs these values should change immediately which doesn't happen in data(){} case.

Collectives™ on Stack Overflow

How to Convert String to Variable Name in Vue JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related