What is the best approach to iterate through multiple input fields while maintaining separate states for each one?

Utilizing Vuetify to create text fields and applying v-model to a textFieldState results in all text fields sharing the same state, causing input from one field to leak into others. How can I ensure that each field maintains its own state?


  <div v-if="threeTextFields">
    <label for="" v-for="textField in textFields" :key="textField">
      <v-text-field :label="textField" :value="textField" v-model="textFieldState"></v-text-field>
    </label>
  </div>

data(){
return{
textFieldState:"",
textFields: [
   "Account ID",
   "Settings Tolerance",
   "Library Tolerance"
 ],
}
}

Answer №1

My suggestion is to structure the code as follows: each item in the textFields array should have two properties - value and state. Bind the value property to the value attribute and the state property to the v-model:

data() {
    return {
      textFieldState: "",
      textFields: [{
          value: "Account ID",
          state: ""
        },
        {
          value: "Settings Tolerance",
          state: ""
        },
        {
          value: "Library Tolerance",
          state: ""
        }
      ],
    }
<div v-if="threeTextFields">
  <label for="" v-for="textField in textFields" :key="textField">
   <v-text-field :label="textField" :value="textField.value" v-model="textField.state"></v-text-field>
 </label>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there any potential security vulnerability when using ActiveRecord::Serialization.from_json() in RoR to parse uploaded JSON?

Currently in the process of setting up an export-import feature in Ruby on Rails. I have been contemplating the possibility of malicious code injection since JSON has the capability to include JavaScript. Is there a risk that someone could inject harmful ...

I'm experiencing an issue where my JavaScript function is only being triggered

I have a simple wizard sequence that I designed. Upon selecting an option from a dropdown menu on the first page, a new page is loaded using jQuery ajax. However, when clicking back to return to the original page, my modelSelect() function, responsible for ...

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...

add a hyperlink within a mouse click action

Looking for a way to make phone numbers clickable on mobile devices? Check out this script! I've implemented a script that displays a phone number when users click 'call us' and sends a Google Analytics event. However, I'm having troub ...

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

What is the shebang used for in JavaScript?

In one article I came across, it was mentioned that by including #! /usr/bin/python in a file named testScript, running ./testScript from the command line would be the same as running /usr/bin/python testScript This concept seems plausible to me as most s ...

Do not fulfill the promise until all the images have finished loading

Below is the intended process: Iterate through a collection of img tags Retrieve each tag's src URL Convert it to a base64 encoded string using an HTML 5 canvas Once all images have been converted, resolve the promise and call the callback function ...

Transforming a Shadertoy experiment into a customized Three.js playground on my local machine

I am currently working on a local shader sandbox project inspired by a Shadertoy created by lennyjpg. I have been referencing two Stack Overflow questions and answers (one, two) for help. The goal is to convert the Shadertoy code to use Three.js for a larg ...

What method is used to initialize the variables in this JavaScript snippet, and what other inquiries are posed?

As a backend developer, I'm looking to understand this JavaScript snippet. While I grasp some parts and have added comments where I am clear, there are still sections that leave me with bold questions. function transformData (output) { // QUESTIO ...

Dynamic form name validation in Angular is crucial for ensuring the accuracy and

When it comes to validating a form in Angular, I usually use the ng-submit directive like this: <form name="formName" ng-submit="formName.$valid && submitForm()"></form> This method works well for forms with predefined names that I se ...

Can VueJS Computed handle multiple filters at once?

I am encountering an issue with this code - when I attempt to add another filter inside the computed section, it doesn't work. However, if I remove the additional filter, the code functions correctly. My goal is to have both company and product searc ...

How to Use JQuery to Display Elements with a Vague Name?

Several PHP-generated divs are structured as follows: <div style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top ...

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

My goal is to make 2 HTTP requests where the first call creates a record and then based on its result, I want to decide whether or not to execute the second call that updates another data. However, despite being able to handle errors in the catchError bl ...

Implementing a bloom pass in ThreeJS can alter the transparency of a canvas

IMPACT OF BLOOM EFFECT ON TRANSPARENCY Currently, my renderer setup looks like this: renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer:true, alpha:true } ); For implementing the bloom pass in post-processing: var renderPass = ...

JavaScript namespace problems

Although I am using a namespace, the function name is getting mixed up. When I call nwFunc.callMe() or $.Test1.callTest(), it ends up executing _testFunction() from the doOneThing instead of the expected _testFunction() in the $.Test1 API. How can I correc ...

What are the steps for importing KnockOut 4 in TypeScript?

It appears straightforward since the same code functions well in a simple JS file and provides autocompletion for the ko variable's members. Here is the TypeScript code snippet: // both of the following import lines result in: `ko` undefined // impo ...

Attempting to maintain the main navigation highlighted while browsing through the secondary navigation

I am facing a small issue that seems like it should be an easy fix, but I can't seem to figure it out. While working on my site, I'm having trouble keeping the parent navigation highlighted when scrolling through the sub-menu. If you hover over ...

Creating a personalized aggregation function in a MySQL query

Presenting the data in tabular format: id | module_id | rating 1 | 421 | 3 2 | 421 | 5 3. | 5321 | 4 4 | 5321 | 5 5 | 5321 | 4 6 | 641 | 2 7 | ...

Creating a variable in Node.js to serve as the name of a nested element within an object

Check out the object I have: obj = { "FirstName": "Fawad", "LastName": "Surosh", "Education": {"University": "ABC", "Year": "2012"} } Take a look at my node.js script: var nodeName = 'Education.Year'; obj.nodeName; // ...

Showing a gallery of images in React

I have a unique situation where I am working on setting a variable to match the import statement that calls for images. Once I have this variable assigned, I want to use it to display the corresponding image. For instance, if my code generates the name &ap ...