Storing formatted user input in an array with VueJS: A step-by-step guide

Looking for assistance that relates to the following question Vue.js: Input formatting using computed property is not applying when typing quick

I am facing a challenge in extracting formatted values from text inputs and storing them in an array. I intend to organize this in a matrix structure, but for now, simplifying it into an array.

Your help would be greatly appreciated, thank you!

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
   <div
      v-for="(input, index) in valueInputs" <-- index
      :key="index"
    >
      <input
        v-model="value"     // <-- Keeping track of the current index
        @input="formatTime" // <-- To be able to assign it in an array later on
        maxLength="4"       // I have tried formatTime[index] or value[index]
        id="format-value" // but that doesn't seem to work, how can I pass the index 
        class="input" // to formatTime or value fields?
        type="text"
      />
  </div>
</div>

data () {
  return {
  valueInputs: [],    // List of inputs
  allFormatValues: [] // Intending to store all the formatted values by index here
 }
}

Trying to establish an array to retain all the formatted values:

   this.allFormatValues[index] = this.value;

Seeking guidance on linking the index with the formatted string value effectively...

Answer №1

When accessing the valueInputs array, remember that you are retrieving the values and not the indexes. To get the index of each value in a v-for loop, you can use the following syntax:

v-for="(value, index) in valueInputs"

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

What could be the reason for the lack of styling on the select element when using PaperProps in the MenuProps of my Select component?

I've been struggling to remove the white padding in this select box for a while now. I've tried countless variations and places to tweak the CSS with no success. Any suggestions on how to make it disappear? The project is using MUI 5, and I even ...

Obtaining a button from a dialog in Google Apps

It seems like I'm overlooking something really simple here, but I'm struggling to enable an interface button from a dialog box in Google Apps. When I try setting the disabled attribute to false in a this object under the "click" function, the bu ...

Tips for accessing payment details from a stripe paymentElement component in a React application

Here is a basic code snippet for setting up recurring payments in Stripe: await stripe ?.confirmSetup({ elements, confirmParams: { return_url: url, }, }) After browsing through the documentation and the internet, I have two unanswere ...

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

Recently, I created a form that redirects to the route /repair upon submission with an action of /repair. However, I would prefer to keep it as a Single Page Application (SPA) where after submitting the form, the fields are cleared, and a simple message l ...

Hide multiple divs with similar ids in JQuery when clicking outside of them

Is there a way to hide all div elements with similar id if none of them are clicked on? Currently, my code only works for the first div because I am using index[0] to retrieve the id. How can I make it work for all ids? Below is the code snippet: $(win ...

Tips for showcasing an entire array in Visual Studio Studio while debugging

I'm currently troubleshooting a C program in VS Studio. I have MinGw installed and configured successfully. However, I am facing an issue where the debug window is not displaying all the contents of an int array[4]. In the debug window, my array A sho ...

The page is constantly updating on its own

In my React app, the App component checks for a token in local storage upon loading. If a token is found, it is verified. If the token is valid, the user is directed to the dashboard; otherwise, they are taken to the login page. The issue I am facing is ...

Utilizing Node.js within a closed intranet environment

Utilizing Nodejs's npm has proven to be quite convenient. Thus, I made the decision to incorporate it into my company's project. However, a predicament arises as my company mandates development within a closed network. This restricts my access s ...

The dataLayer in Google Tag Manager is failing to trigger the necessary event

Product Purchase Button: <button id="btnBuy" onclick="SendData();" JavaScript function to track product details: <script> var dataLayer = []; dataLayer.push( { 'ecommerce': { 'detail': { 'actionField' ...

Include the component with the function getStaticProps loaded

I am currently working on a project using NextJs and I have created a component to load dynamic data. The component works fine when accessed via localhost:3000/faq, but I encounter an error when trying to import the same component into index.js. It seems l ...

The initial click may not gather all the information, but the subsequent click will capture all necessary data

Issue with button logging on second click instead of first, skipping object iteration function. I attempted using promises and async await on functions to solve this issue, but without success. // Button Code const btn = document.querySelector("button") ...

A guide on breaking down a variable into an array using batch scripting

I am currently working on creating a text adventure game using batch scripting and I am looking for a way to split a variable like 'set userinput=take book' into an array. My goal is to develop a program that can divide strings into individual ar ...

Issue encountered while retrieving JSON data from Github

I am currently using d3.json to retrieve a JSON link from the Enterprise GitHub (within the same repository/folder as the JavaScript file). d3.json("https://raw.github.exampleEnterprise.com/path/to/repo/data.json?token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Jquery failing to append existing values into the DOM

I'm currently attempting to enhance an existing jQuery table structure with the following code snippet: function GetViewData(data) { $.ajax({ type: "GET", url: "/Services/Configuration/ViewServices. ...

AngularJS - Swipe to update

I've been trying to use the pull to refresh plugin for Angular JS, but unfortunately it's not working for me. Even though I can see the text, when I try to pull nothing happens! I followed all the steps outlined on this GitHub page: https://githu ...

"Utilizing Javascript to create a matrix from a pair of object arrays

Attempting to transform an infinite number of arrays of objects into a matrix. height: [1,3,4,5,6,7] weight: [23,30,40,50,90,100] to 1 23 1 30 1 40 1 50 ... 3 23 3 30 3 40 ... Essentially mapping out all possible combinations into a matrix I experime ...

Passing props to Vue components without specifying a value

I need help setting an attribute on my component without specifying a value. For instance: <my-button primary>Save</my-button> Within my component, I have declared primary in the props: Vue.component("my-button", { props: ["primary"], te ...

Sending a nested route broadcast in VueJS 2

Here are the routes I am using: <script> routes = [ { path: '/', component: Home, children: [{ path: 'nested1', name: 'nested1', component: Nested1, }, { ...

Creating a dynamic dropdown menu to display nested arrays in Vuejs

I have some important data https://i.sstatic.net/Cq2t6.png Challenge I'm facing difficulty in accessing the tubes array within my data Solution script data() { return { types: [] } }, m ...

Drop-down options disappear upon refreshing the page

Code snippet for sending value to server using AJAX in JavaScript In my script, the status value may vary for each vulnerable name. When selecting a status option and storing it in the database through AJAX, the selected value is lost after refreshing th ...