Is the value of the index in the input constantly fluctuating in Vue?

I have a method that generates an array of objects in the following way:

onCalculate_a(code)
    {
      let data = this.forms.calculate_a.map((p,i) => {
        return {
          product_code: code,
          price: p
        }
      });
      this.supplier_a = data;
    },

I've attached this method to the input event:

<input type="number" @input="onCalculate_a(material.product_code)" v-model="forms.nprice_a[index]">

The issue is that the function gets executed with every input, causing the product_code to always be replaced by the value of the last input.

Desired output:
{ product_code: BB, price: 100 },
{ product_code: CC, price: 200 }

Actual output:
{ product_code: CC, price: 100 },
{ product_code: CC, price: 200 }

Is there another approach I can take to prevent the product_code from being overridden by the last input?

Here's my jsfiddle: https://jsfiddle.net/damakuro221/y2Lfrsvd/11/

Answer №1

When it comes to managing the state of data, using components can greatly simplify the process for you. Handling it manually is possible but messy and difficult, making it not worth the effort when compared to the ease and cleanliness of utilizing components. Simply place the object in a component and let the component take care of that data or state. Check out this link for more information:

Answer №2

By triggering the method on every keypress, you are running it on every input event.

To optimize this, switch from using @input= to v-on:blur=. This change will ensure that the onCalculate_a method is only activated once the user has completed their input and shifted focus away from the input box.

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 is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

Unable to sign up for WordPress function

I'm having trouble getting my function registered properly in WordPress, no matter how many times I try. So far, here's what I've done: Inserted code into themes functions.php function test_my_script() { wp_register_script( 'custom-s ...

The useLocation state is returning as null

I've encountered a debugging issue with my app. It's a straightforward application that fetches random API images from Spoonacular, allowing users to either select "Yah" or "Nah" similar to Tinder. Upon choosing "Yah", the image should be added t ...

The response from the service worker fetch did not include the "Content-Length" header

Currently, I am fetching static assets such as images and PDFs from AWS S3 and providing download progress updates to the client using the service worker API. My method involves reading the "content-length" header in the response. Interestingly, this appro ...

Sort the table rows dynamically without the need to refresh the page

I have a table below in which I would like to reorder (in ascending order) the rows if any of the counter values become zero. <table> <tr id='col_1'> <td><div id='counter_1'>3</div></td> ...

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it. I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, a ...

It seems like the loading.js file in the nested component is malfunctioning

Within my Next.js 13 application, I have a client component that is responsible for fetching data from an API. This component is located in a file named dog-fetch.js. Currently, I am working on implementing a loading state for this specific component. I a ...

Set up a global configuration for all $.ajax calls to enable automatic retries in case of a timeout

Looking for a solution to implement a global timeout function using $.ajaxSetup in my Phonegap app. The goal is to automatically retry ajax GET or POST requests in case of timeout, specifically due to poor internet connection. As a Backbone.js user, I hav ...

Searching for the top 10 documents with the highest value in a specific field using mongoose

I am working with a mongoose model that includes a field called played_frequency. How can I retrieve the first 10 documents from all those available, based on the highest value in the play frequency? Here is the interface of my model: export interface ITr ...

AngularJS offers the ability to filter JSON data with a specified parameter, allowing for precise data

I have a JSON file called datas that contains the following information: [ {"value": "1", "text": "aaa"}, {"value": "2", "text": "bbb"}, {"value": "3", "text": "ccc"}, {"value": "4", "text": "ddd"}, {"value": "5", "text": "eee"}, { ...

Utilizing a child component within a parent component in VueJS

As I was exploring headlessui's menu component, I came across a unique nested component structure illustrated below: (check it out here: ) <template> <Menu> <MenuButton>More</MenuButton> <MenuItems> <Me ...

Display drop-down item when selected for the first time and hide it when selected for the same item for the second time

Is there a way to display form input when "C" is selected and hide it when "A", "B", or "D" are selected? If "C" is selected again after initially showing the form input, should it be hidden? For example, if "C" is selected for the first time, the form inp ...

The best way to distribute React components within a monorepo using source sharing

I am managing a monorepo with 3 unique React projects: - SHARED_COMPONENTS src Button.tsx package.json - APP_A src main.ts package.json - APP_B src main.ts package.json How can I import the Button(.tsx) module in both main.ts files ...

"Exploring the process of assigning input data to a different variable within a Vue component

Reviewing the code snippet I currently have: <template> <div> <input v-model.number="money"> <p>{{ money }}</p> </div> </template> <script> name: 'MyComponent', data () { ...

Incorporating Vue into a dated website by eliminating the div and replacing it with new dynamic Vue components

As I attempt to integrate Vue into my old website, I want the existing jQuery scripts to continue functioning and the old HTML content to be displayed. However, I am encountering an issue where the el element and its contents are being removed. This probl ...

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

The annoying pop-up refuses to vanish even after clicking on the "Stop Capture" button during screen recording

I'm dealing with an issue regarding popups. Whenever I choose "get audio from desktop" and click on "Start Recording", another browser popup appears, prompting me to make another decision (this involves selecting the screen and sharing audio). I' ...

Retrieve the CSV file following a successful POST request

Is there a way to automatically download a CSV file upon clicking a button that triggers a post request? The post request generates a large response, making it inefficient to transfer it directly from express to the front end. I'm looking for a solu ...

Promise.all doesn't pause for Firestore queries to iterate

The code I am converting from the Realtime Database to Firestore involves looping through each User (doc) in Firestore and then through each document of 2 nested Subcollections inside each User in order to create some jobs to be handled later. Although I ...

Automatically submitting the selection when it changes

I am facing an issue with a selection form that is supposed to update the database on change using jQuery, but it seems like nothing is happening. Can anyone provide assistance with this problem? <SELECT name='status' id='status'> ...