根据输入更改更新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.income模型的更改，而不用通过方法更新值即可。

工作演示

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>

Answer 2

首先，我认为值（收入，费用，可支配收入）的范围必须是无数据的计算属性，因为它们是正在计算和呈现的值。 无论如何，如果您想要一种快速的解决方案以使其可行，那么您应该已经实现了：

  

v-on：keyup =“ updateIncome”

进入@change函数附近的输入v-model =“ form.income”

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" v-on:keyup="updateIncome" @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>