CODEWITHSUNDEEP
javascriptvue.js
damakuro221
damakuro221

Reputation: 23

passing value index on input keep changing? vue

i have a method to create an array of objects like this

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

i put the method on the input event

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

the problem is the function will be executed on every input, so the product_code will always be replaced by the last input.

this is what i want
{ product_code: BB, price: 100 },
{ product_code: CC, price: 200 }
--------------------------------
this is what i get
{ product_code: CC, price: 100 },
{ product_code: CC, price: 200 }

is there any other way so the product_code will not be replaced by the last input?

this is my jfiddle https://jsfiddle.net/damakuro221/y2Lfrsvd/11/

Upvotes: 2

Views: 114

Answers (2)

TEFO
TEFO

Reputation: 1653

here's the managing state(data) came that components can really make it easy for you too handle that. it isnt impossible to do that but its messy and hard, after all not worth it compare to easy and clean components that suggested. all you do is put that object in a component and let component worry about that data or state. here link may help: https://stackoverflow.com/a/60771140/7908390

Upvotes: 1

Luke Storry
Luke Storry

Reputation: 6722

You're running that method on every input event, and thus running your method every keypress.

Use v-on:blur= instead of @input= and it will only run the onCalculate_a method when the user has finished inputting and moved focus away from that input box.

Upvotes: 0

Related Questions