Как я могу отслеживать стоимость входов, которые создаются динамически? - PullRequest
Новая
       13

Как я могу отслеживать стоимость входов, которые создаются динамически?

1 голос
/ 19 января 2020

Фон: Мое приложение может динамически добавлять входы. Каждый раз, когда создается новый вход, новый объект создается в массиве затрат . Каждый новый вход принимает новое значение и отображается справа от входа.

Проблема: Я просто пытаюсь -

  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>

1 Ответ

1 голос
/ 19 января 2020

Вы уже отслеживаете свои значения расходов, поскольку используете v-model для значения каждого элемента в массиве expenses. Хотя, чтобы убедиться, что он преобразуется в число, я бы использовал v-model.number="expense.expensesValue".

. Для получения суммы вы можете использовать свойство computed и функцию уменьшения. 

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>
...