Question

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

问题：我只是在尝试-

跟踪每个输入的值和
获取所有已创建输入的总价值

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

要获取总数，可以使用computed属性和reduce函数。

new Vue({
  el: "#app",
  data: {
      expenses: [{
        expensesValue: 0
      }]
  },
   methods: {
      addInputs(){
        this.expenses.push({
          expensesValue: 0
        })
      }
  },
  computed: {
    total() {
      return this.expenses.reduce((acc, curr) => {
        acc += curr.expensesValue;
        return acc;
      }, 0);
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
 <div v-for="(expense, idx) in expenses" :key="idx">
      <input v-model.number="expense.expensesValue" type="number"> - {{expense.expensesValue}}
 </div>
<p>total {{ total }}</p>
 <button @click="addInputs()">Add</button>
</div>

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

1 个答案: