输入上的传递值索引不断变化？ Vue答案

【问题标题】：passing value index on input keep changing? vue输入上的传递值索引不断变化？ Vue
【发布时间】：2020-11-05 04:20:23
【问题描述】：

我有一种方法可以创建这样的对象数组

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]">

问题是函数将在每个输入上执行，因此 product_code 将始终被最后一个输入替换。

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 }

有没有其他办法让product_code不会被最后一个输入代替？

这是我的小提琴https://jsfiddle.net/damakuro221/y2Lfrsvd/11/

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这里是管理状态（数据），组件可以真正让您轻松处理它。这样做并非不可能，但它的混乱和困难，毕竟与建议的简单干净的组件相比不值得。您所做的就是将该对象放入组件中，并让组件担心该数据或状态。这里的链接可能会有所帮助：https://stackoverflow.com/a/60771140/7908390

【讨论】：

【解决方案2】：

您在每个input 事件上运行该方法，因此每次按键都运行您的方法。

使用v-on:blur=而不是@input=，它只会在用户完成输入并将焦点从输入框移开时运行onCalculate_a方法。

【讨论】：

结果还是一样。我想我需要另一种方式来传递价值
还可以尝试将v-model 更新为v-model.lazy，这可能会有所帮助。