时间戳

首页 > 解决方案 > 如何跟踪动态创建的输入值？

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

问题描述

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

问题：我只是想——

  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>

标签： javascriptformsvue.js

解决方案

您已经在跟踪您的费用值，因为您正在使用数组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>

推荐阅读