我如何跟踪动态创建的输入的值？

Question

背景：我的应用程序可以动态添加输入。每次创建新输入时，都会在expenses数组中创建一个新对象。每个新输入都接受一个新值，并显示在输入的右侧。

问题：我只是想-->

1. 跟踪每个输入的值和
2. 获取所有创建的输入的总值

<template>
 <div v-for="expense in expenses" :key="expense">
      <input v-model="expense.expensesValue" type="number"> - {{expense.expensesValue}}
 </div>
 <button @click="addInputs()">Add</button>
</template>

<script>
export default {
  name: "form",
  data() {
    return{
      expenses: [{
        expensesValue: 0
      }]
}
},
 methods: {
    addInputs(){
      this.expenses.push({
        expensesValue: 0
      })
    }
}
}
</script>

背景：我的应用程序可以动态添加输入。每次创建新输入时，都会在费用数组中创建一个新对象。每个新输入都接受一个新值，并显示在右侧...

Answer 1

由于您正在对v-model数组中每个项目的值使用expenses，因此您已经在跟踪费用值。尽管为了确保将其转换为数字，我将使用v-model.number="expense.expensesValue"。