javascript - 输入变化时更新 Vue 减法方法

Question

我有一个 Vue 方法，可以从收入中减去费用以获得可支配收入。

现在，减法方法会在模糊时触发，但在收入或支出值更新时它应该不断触发。例如，当某人将其收入输入收入输入时，模拟减法方法的可支配收入范围应在输入每个数字时更新。同样，如果有人在其中一个费用组成部分中输入任何费用，则可支配收入应该在用户输入时更新。

    var budgetLine = Vue.extend({
        template: `
                <div>
                    <div class="row" v-for="item in items">
                        <input type="text" placeholder="Item"></input>
                        <input type="text" placeholder="How much?" v-model="item.qty"></input>
                        <button @click="addItem">+</button>
                        <button @click="removeItem">-</button>
                    </div>
                    <p id="result"><strong>Total:</strong> $ {{ totalQty }} </p>
                </div>
        `,

        data: function() {
        return {
            items: []
        };
        },
        watch: {
        totalQty(value) {
            this.$emit('update-expense', value)
        }
        },
        computed: {
        totalQty() {
            return this.items.reduce((total, item) => {
            return total + Number(item.qty);
            }, 0);
        },
        },

        methods: {
        addItem() {
            this.items.push({
            qty: 0
            });
        },
        removeItem(item) {
            this.items.pop(item);
        }
        },

        mounted() {
        this.addItem()
        }
    });

    var budgetApp = new Vue({
        el: '#app',
        data: {
        budgets: {
            'One': 0,
            'Two': 0,
            'Three': 0
        },
        form: {
            income: 0,
            expenses: 0,
            dispIncome: 0
        }
        },
        components: {
        'budget-line': budgetLine
        },
        watch: {
        budgets: {
            deep: true,
            handler() {
            this.form.expenses = this.budgetKeys.reduce((accum, key) => accum + this.budgets[key], 0)
            }
        }
        },
        computed: {
            budgetKeys() {
                return Object.keys(this.budgets)
            },
        },
        methods: {
            updateIncome(event) {
                this.form.income = event.target.value;
                this.form.dispIncome = this.form.income - this.form.expenses
            },
            updateExpenses(event) {
                this.form.expenses = event.target.value;
                this.form.dispIncome = this.form.income - this.form.expenses
            },
            calculateExpense(amount, budget) {
                this.budgets[budget] = amount;
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
        <header>
            <div class="header_container">  
                <div class="header_container-copy">  
                    <h1>Let's talk budget.</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="header_container-results">  
                    <h2>Disposable Income</h2>
                    <div class="row"><span>Income:</span><span>{{ form.income }}</span></div>
                    <div class="row"><span>Expenses:</span><span>{{ form.expenses }}</span></div>
                    <div class="row"><span>Disposable Income:</span><span>{{ form.dispIncome }}</span></div>
                </div>
            </div>
        </header>
        <h2>Income</h2>
        <input v-model="form.income" @change="updateIncome" type="number" class="form-control" name="income" id="income" placeholder="Income">
        <h2>Expenses</h2>
        <div class="budget" v-for="budget in budgetKeys">
            <h3>{{budget}}</h3>
            <budget-line v-on:update-expense="calculateExpense($event, budget)"></budget-line>
        </div>
    </div>

Answer 1

你已经差不多完成了，只需要观察这个 form.venue 模型的变化，而不是通过方法更新值。

工作演示

var budgetLine = Vue.extend({
    template: `
      <div>
        <div class="row" v-for="item in items">
          <input type="text" placeholder="Item"></input>
          <input type="text" placeholder="How much?" v-model="item.qty"></input>
          <button @click="addItem">+</button>
          <button @click="removeItem">-</button>
        </div>
        <p id="result"><strong>Total:</strong> $ {{ totalQty }} </p>
      </div>
    `, 

    data: function () {
      return {
        items: []
      };
    },
    watch: {
      totalQty(value) {
        this.$emit('update-expense', value)
      }
    },
    computed: {
      totalQty() {
        return this.items.reduce((total, item) => {
          return total + Number(item.qty);
        }, 0);
      },
    },

    methods: {
      addItem() {
        this.items.push({
          qty: 0
        });
      },
      removeItem(item) {
        this.items.pop(item);
      }
    },

    mounted() {
      this.addItem()
    }
  });

var budgetApp = new Vue({
    el: '#app',
    data: {
      budgets: {
        'One': 0,
        'Two': 0,
        'Three': 0
      },
      form: {
        income: 0,
        expenses: 0,
        dispIncome: 0
      }
    },
    components: {
      'budget-line': budgetLine
    },
    watch: {
      budgets: {
        deep: true,
        handler(budget) {
          this.form.expenses = this.budgetKeys.reduce((accum, key) => accum + this.budgets[key], 0);
        }
      },
      
      'form.income'() {
        this.updateIncome();
      }
    },
    computed: {
      budgetKeys() {
        return Object.keys(this.budgets)
      },
    },
    methods: {
      updateIncome() {
        this.form.dispIncome = this.form.income - this.form.expenses;
      },
      calculateExpense(amount, budget) {
        this.budgets[budget] = this.form.expenses = amount;
        this.updateIncome();
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <header>
    <div class="header_container">
      <div class="header_container-copy">
        <h1>Let's talk budget.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="header_container-results">
        <h2>Disposable Income</h2>
        <div class="row"><span>Income:</span> <span>{{ form.income }}</span></div>
        <div class="row"><span>Expenses:</span> <span>{{ form.expenses }}</span></div>
        <div class="row"><span>Disposable Income:</span> <span>{{ form.dispIncome }}</span></div>
      </div>
    </div>
  </header>
  <h2>Income</h2>
  <input v-model="form.income" type="number" class="form-control" name="income" id="income" placeholder="Income">
  <h2>Expenses</h2>
  <div class="budget" v-for="budget in budgetKeys">
    <h3>{{budget}}</h3>
    <budget-line v-on:update-expense="calculateExpense($event, budget)"></budget-line>
  </div>
</div>