Javascript 输入时传递值索引是否保持更改？vue

我有一个方法来创建这样的对象数组

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

我将该方法放在输入事件上

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

是否有其他方法使产品代码不会被最后一次输入替换

---

这是我的jfiddle

您在每个

输入

事件上运行该方法，因此每次按键都运行该方法

---

使用

v-on:blur=

而不是

@input=

，只有当用户完成输入并将焦点从输入框移开时，它才会运行

onCalculate\u a

方法。

以下是管理状态（数据），组件也可以让您轻松处理。要做到这一点并非不可能，但它凌乱而坚硬，毕竟与建议的简单而干净的组件相比不值得。您所要做的就是将该对象放在组件中，让组件担心该数据或状态。此处链接可能会有所帮助：

结果仍然相同。我想我需要另一种方法来传递值，还可以尝试将

v-model

更新为

v-model.lazy

，这可能会有所帮助。

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 }