Javascript 如何计算动态创建的输入值的总和？

Background-我创建了一个应用程序，父组件只需单击一个按钮即可创建和删除输入字段（子组件）。输入值通过v型记录在屏幕上

问题-创建新输入时，以前的值将替换为新输入值

期望值-创建新输入时，它会添加上一个输入值的值

为了更清晰的视觉效果

父组件

 <form-input v-for="n in count" :key="n" :value="expense" @input="expense = $event"></form-input>

      <button @click="addInputs">Add Expense</button>
      <button @click="deleteInputs">Delete</button>

      <p>Total Expense: {{ expense }}</p>

export default {
  components: {
    "form-input": formInput
  },
  name: "form",
  data() {
    return {
      count: 0,
      expense: 0
    };
  },
  methods: {
    addInputs: function() {
      this.count++;
    },
    deleteInputs: function() {
      this.count--;
    }
  }
};

增加费用
删除
总费用：{{Expense}

导出默认值{
组成部分：{
“表单输入”：表单输入
},
名称：“表格”，
数据（）{
返回{
计数：0，
费用：0
};
},
方法：{
addInputs:function（）{
这个.count++；
},
deleteInputs:function（）{
这是伯爵；
}
}
};

子组件

<input type="text" placeholder="Expense" />
<input type="number" placeholder="Amount" @input="$emit('input', $event.target.value)" />

---

在这里，我为您制作了一个沙盒，让您看到我的解决方案，因为有很多更改，您可以看到它是如何执行的

要点是：

您必须分别跟踪每个输入的值。这是使用数组完成的

更改此数组后，我们将重新计算总费用

父母亲

增加费用
删除
总费用：{{totalExpense}}

从“/components/HelloWorld”导入HelloWorld；
导出默认值{
组成部分：{
“表单输入”：HelloWorld
},
名称：“表格”，
数据（）{
返回{
计数：0，
费用：[]，
总费用：0
};
},
方法：{
addInputs:function（）{
这个.count++；
this.expenses[this.count-1]=0；
},
deleteInputs:function（）{
这是伯爵；
这个.expenses.pop（）；
这个.setTotalExpense（）；
},
获取费用（数据）{
this.expenses[data.id]=parseInt（data.value，10）| 0；
这个.setTotalExpense（）；
},
setTotalExpense（）{
console.log（这个是费用）；
this.totalExpense=this.expenses.reduce（（总和，值）=>{
返回和+val；
}, 0);
}
}
};

小孩

导出默认值{
名称：“HelloWorld”，
道具：{
身份证号码
}
};

我使用了

HelloWorld

模板，这就是为什么会有一些引用，但我相信您可以轻松地清理它：）

---

而且，可能有一些小的边缘案例错误，你可以清理。不过，这应该为您指明了正确的方向。

您正在用最后添加的子组件覆盖父项中的费用。相反，您应该将个人费用存储在一个数组中。然后通过对数组求和来计算总费用。从这个意义上讲，您可以在

v-for

循环中使用

v-model

，因为每个子组件都将写入数组中各自的元素。嘿，T.Short，感谢您迄今为止提供的所有帮助。我感到困惑的一件事是由父组件中的索引绑定的id属性，用于跟踪子组件。因此，当您从子组件获取事件时，父组件可以知道它来自哪个子组件。我在尝试将子组件的费用输入值保存到父组件中的数组时遇到了问题，类似于您处理金额的方式input@EddieWeldon你能为这个问题提出一个新问题吗？在评论中给我贴上标签，我会调查的。这会让事情变得更简单更清楚，谢谢。