Espero que todos estéis muy bien. Quiero saber si hay alguna forma en que podamos convertir una cadena en un nombre de variable. Quiero convertir "minXLabel" a minXLabel y usarlo dentro de etiquetas span como esta <span>{{minXLabel}</span> Tengo
<div class="placeholder-value"> <span>{{ inputsArray[index].firstOption || placeholder[index].first}} - </span> <span>{{ inputsArray[index].secondOption || placeholder[index].second}}</span> </div>y la matriz de entrada es
inputsArray : [ { 'firstOption': "minXLabel", 'secondOption': "maxXLabel" }, { 'firstOption': "minXLabel", 'secondOption': "minYLabel" }, { 'firstOption': "maxYLabel", 'secondOption': "maxXLabel" }, { 'firstOption': "maxYLabel", 'secondOption': "minYLabel" } ], Puedo hacerlo manualmente con <span>{{ minXLabel || placeholder[index].first}} - </span> pero como quiero generar un bucle con diferentes claves, necesito convertir esa cadena en un nombre de variable.
Puede transformar una cadena en variable usando la función eval, algo como esto
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) } Sin embargo, estas variables no se declararán, puede asignarles un valor si lo desea, por ejemplo inputsArray[index].firstOption || placeholder[index].first y luego use la variable.
Sin embargo, parece un poco redundante que intente asignar un valor que ya tiene a una nueva variable. Para mí, su primer enfoque es correcto, simplemente recorra su matriz y represente la información allí
<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>