如何追踪动态创建的Input值并计算所有Input的总值？

嘿，看起来你已经把动态添加输入框和基础的值绑定都搞定啦！其实你当前的代码已经在追踪每个Input的值了——v-model="expense.expensesValue"已经实现了双向绑定，用户每次修改输入框内容，expenses数组里对应的对象属性都会实时更新。接下来咱们只需要加上总值计算的功能就完美了，用Vue的计算属性来做最适合不过～

修改后的完整代码 #

<template>
  <div v-for="(expense, index) in expenses" :key="index">
    <input v-model="expense.expensesValue" type="number" placeholder="输入金额"> 
    - {{ expense.expensesValue }}
  </div>
  <p><strong>总金额:</strong> {{ totalExpenses }}</p>
  <button @click="addInputs()">Add</button>
</template>

<script>
export default {
  name: "form",
  data() {
    return {
      expenses: [{ expensesValue: 0 }]
    };
  },
  methods: {
    addInputs() {
      this.expenses.push({ expensesValue: 0 });
    }
  },
  computed: {
    totalExpenses() {
      // 用reduce累加所有输入框的值，同时处理非数字的情况
      return this.expenses.reduce((total, expense) => {
        // 把值转为数字，若输入空或非数字则取0
        const currentValue = Number(expense.expensesValue) || 0;
        return total + currentValue;
      }, 0);
    }
  }
};
</script>

关键说明 #

• 值追踪优化：我把v-for的key改成了index（你也可以给每个expense对象添加唯一id作为更稳妥的key），因为直接用expense对象作为key在对象内容重复时可能引发渲染问题，Vue推荐使用唯一标识作为循环key。
• 总值计算逻辑：
  1. 用computed定义totalExpenses，它会自动监听expenses数组的变化，只要任何一个输入框的值改变，就会实时重新计算总值，比手动调用方法更高效。
  2. 用reduce方法遍历数组累加值，同时通过Number()把输入值转为数字，搭配|| 0处理用户输入空值或非数字的情况，避免计算结果出现NaN。

这样一来，你不仅能实时看到每个输入框的对应值，总金额也会随着输入自动更新啦！

内容的提问来源于stack exchange，提问作者Eddie Weldon