Javascript 在输入更改时更新Vue减法

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

现在，减法在模糊上触发，但它应该在收入或支出值更新时不断触发。例如，当某人在收入输入中输入其收入时，模拟减法的可支配收入跨度应随着每个数字的输入而更新。类似地，如果有人将任何费用键入其中一个费用组成部分，则可支配收入应在用户键入时更新

var budgetLine=Vue.extend({
模板：`
+
-
总计：${{totalQty}
`,
数据：函数（）{
返回{
项目：[]
};
},
观察：{
总数量（值）{
此.$emit（'update-expense'，值）
}
},
计算：{
总数量（）{
返回此.items.reduce（（总计，项）=>{
退货总额+数量（项目数量）；
}, 0);
},
},
方法：{
附加项（）{
这个。项目。推({
数量：0
});
},
移除项目（项目）{
this.items.pop（item）；
}
},
安装的（）{
这是addItem（）
}
});
var budgetApp=新的Vue({
el:“#应用程序”，
数据：{
预算：{
“一”：0，
“两个”：0，
“三”：0
},
表格：{
收入：0，
费用：0，
收入：0
}
},
组成部分：{
“预算行”：预算行
},
观察：{
预算：{
深：是的，
handler（）{
this.form.expenses=this.budgetKeys.reduce（（累计，关键）=>accum+this.budgets[key]，0）
}
}
},
计算：{
预算键（）{
返回Object.keys（this.budgets）
},
},
方法：{
更新名称（事件）{
this.form.income=event.target.value；
this.form.dispIncome=this.form.income-this.form.expenses
},
更新费用（事件）{
this.form.expenses=event.target.value；
this.form.dispIncome=this.form.income-this.form.expenses
},
计算费用（金额、预算）{
此项。预算[预算]=金额；
}
}
});

让我们谈谈预算。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

可支配收入
收入：{form.Income}
费用：{form.Expenses}
可支配收入：{form.dispIncome}
收入
费用
{{预算}
首先，我认为价值（收入、支出、可支配收入）跨度必须是一个计算属性，而不是一个数据，因为它们是正在计算和呈现的价值。
无论如何，由于您已经有了它，如果您想要一个快速的解决方案，使其工作，您应该实施：

v-on:keyup=“updateIncome”

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


var budgetLine=Vue.extend({
模板：`
+
-
总计：${{totalQty}
`,
数据：函数（）{
返回{
项目：[]
};
},
观察：{
总数量（值）{
此.$emit（'update-expense'，值）
}
},
计算：{
总数量（）{
返回此.items.reduce（（总计，项）=>{
退货总额+数量（项目数量）；
}, 0);
},
},
方法：{
附加项（）{
这个。项目。推({
数量：0
});
},
移除项目（项目）{
this.items.pop（item）；
}
},
安装的（）{
这是addItem（）
}
});
var budgetApp=新的Vue({
el:“#应用程序”，
数据：{
预算：{
“一”：0，
“两个”：0，
“三”：0
},
表格：{
收入：0，
费用：0，
收入：0
}
},
组成部分：{
“预算行”：预算行
},
观察：{
预算：{
深：是的，
handler（）{
this.form.expenses=this.budgetKeys.reduce（（累计，关键）=>accum+this.budgets[key]，0）
}
}
},
计算：{
预算键（）{
返回Object.keys（this.budgets）
},
},
方法：{
更新名称（事件）{
this.form.income=event.target.value；
this.form.dispIncome=this.form.income-this.form.expenses
},
更新费用（事件）{