如何根据用户输入更新数据对象的属性？

Question

我有一个似乎可以解决的简单问题。这是我要操作的对象：

 [ { "expensesKey": "x", "expensesValue": 100, "subExpense": null },
   { "expensesKey": "y", "expensesValue": 100, "subExpense": null }, 
   { "expensesKey": "z", "expensesValue": 100, "subExpense": null } ], 
   "earnings": 300 } ]

我有一个 v-for 循环，它有一个 v-model 可以绑定到 "subExpense" 属性，就像这样：

div v-for="(expense, index) in expenseButton" :key="index">
     <input placeholder="expense.expensesKey" v-model.number="expense.subExpense"> </input>
</div>

问题： 每当 "subExpense" 用户输入的值变化？

尝试次数：

我创建了一个按钮，其方法可以通过单击方法完成此操作
一种将所有"subExpense"相加并从"earnings"中减去的计算方法

 methods: {
  subtractExpensesValue(expense) {
      expense.expensesValue = expense.expensesValue - expense.subExpense;
      console.log(expense.expensesValue);
    }
},
  computed: {
    addSubExpense() {
      return this.expenseButton.reduce((acc, curr) => {
        acc += Number(curr.subExpense);
        return acc;
      }, 0);
    }
  }

Answer 1

您可以修改按钮的方法并将其附加到 subExpense 输入的输入事件，如下所示：

  v-on:input="substractExpensesValue($event, expense)"


  subtractExpensesValue(event, expense) {
    expense.expensesValue = expense.expensesValue - expense.subExpense;
    console.log(expense.expensesValue);
  }

建议

您还应该将占位符映射更改为 :placeholder=“expense.expenseKey”，否则您只是将文本分配给了占位符。注意 :

如何根据用户输入更新数据对象的属性？

How can I update properties of a data object based on user input?

javascript

arrays

vue.js

v-for

建议