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.
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>