Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

Question

Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

Hi everyone, I was wondering if there's a way to convert a string into a variable name. For example, I want to convert "minXLabel" to minXLabel so that I can use it within span tags like this:

<span>{{minXLabel}</span>

. I currently 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 looks like this:

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

I could do it manually with

<span>{{  minXLabel || placeholder[index].first}} - </span>

, but since I want to iterate over different keys in a loop, I need to find a way to dynamically convert strings into variable names.

javascript vue.js

Answer 1

Answer №1

To convert a string into a variable, you can utilize the eval function in the following manner:

 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)
  }

Keep in mind that these variables will not be declared initially. If needed, you can assign values by accessing them with code like

inputsArray[index].firstOption || placeholder[index].first

, and then use those variables.

However, it seems somewhat redundant to assign a value you already possess to a new variable. In my opinion, your original approach is most suitable—simply loop over the array and render the information accordingly:

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

Answer 2

To convert a string into a variable, you can utilize the eval function in the following manner:

 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)
  }

Keep in mind that these variables will not be declared initially. If needed, you can assign values by accessing them with code like

inputsArray[index].firstOption || placeholder[index].first

, and then use those variables.

However, it seems somewhat redundant to assign a value you already possess to a new variable. In my opinion, your original approach is most suitable—simply loop over the array and render the information accordingly:

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

Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

Answer №1

Similar questions

A guide on extracting a JSON data with a BigInt type using TypeScript

What is the syntax for populating an attribute on the same line as v-for in Vue.js?

What is the best method to send a HTTP request (specifically for scraping) to an Angular2 website?

Import the complete JSON file into a variable as an array

Attempting to create a school project involving pizza, but encountering some technical difficulties

Navigating the rollout of a fresh new design

Using ReactJS to strip HTML tags from JSON response

The getSession provided by the getSession function is accessible within getServerSideProps but appears as undefined within the component

Is there a way to remove specific elements from an array without using jQuery?

Using a JavaScript if statement to check the height of a specific HTML element

Using JavaScript to add a JSON string from a POST request to an already existing JSON file

jQuery - class remains unchanged on second click event

Saving a revised JSON file using AngularJS

What is the best way to programmatically route or navigate to a specific route within a Next.js class component?

Vuetify chip displaying lengthy text

Switch between various components using multiple buttons in Next.js

Choose a random element from a string with Javascript

Cypress and VueJS: How to target elements that are dynamically generated following a specific user interaction

Downloading a folder in Node.js using HTTP

Transferring Information from Angular Interface to NodeJS through a JSON Document