如何解决Vue中的多个因变量
实现相互依赖的多个可变变量的最简单方法是什么?
例如,我们的折扣前价格无法更改,我们可以:
- 应用折扣,折扣后的价格应更新,
- 或在折扣后更改价格,折扣应相应更新。
对于此示例,我提出了以下解决方案:https://jsfiddle.net/2wh6cgq5/1/
是否可以不必为每个@input
事件创建单独的处理程序并应用v-model
指令来做到这一点?
解决方法
一种选择是将v模型绑定与计算出的属性一起使用,以便您可以控制设置逻辑。
new Vue({
el: '#app',data: {
priceBeforeDiscount: 100,discount: 50,priceAfterDiscount: 50,},computed: {
priceAfterDiscountInput: {
get() {
return this.priceAfterDiscount;
},set(val) {
this.priceAfterDiscount = val;
this.discount = this.priceBeforeDiscount - this.priceAfterDiscount;
}
},discountInput: {
get() {
return this.discount;
},set(val) {
this.discount = val;
this.priceAfterDiscount = this.priceBeforeDiscount - this.discount;
}
}
},})
另一种可能性是在discount
和priceAfterDiscount
上使用观察者。在这种情况下,它不会导致无限循环,因为值达到平衡,并且观察者仅在值更改时运行。不过,在一般情况下,我会谨慎使用依赖依赖的观察程序。
new Vue({
el: '#app',watch: {
discount() {
this.priceAfterDiscount = this.priceBeforeDiscount - this.discount;
},priceAfterDiscount() {
this.discount = this.priceBeforeDiscount - this.priceAfterDiscount;
}
},})
但是,我真的不认为您的解决方案有问题。如果不需要使用v-model指令(例如,用于vee-validate),我将其转换为v-bind并在输入处理程序中进行赋值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。