Vue.js：将两个输入互相绑定

我目前开始使用vue.js，并遇到过一种情况。Vue.js：将两个输入互相绑定

我希望绑定两个输入，例如C = A - B和B = A - C，其中A是常数，B或C的变化会影响另一个。

我成功地使用v-模型绑定C并将其放入计算中。然而，当我对B进行相同的尝试时，它会陷入无限循环。

这应该是非常简单的事情，但我似乎无法找到解决方案。任何帮助表示感谢你！

编辑：代码包括在下面。我希望使用能够输入down_payment或loan_amount。之后它会自动计算另一个值。不过这种方式似乎让它进入一个无限循环

<input type="number" v-model="down_payment" class="form-control-right" placeholder="Downpayment" value="{{ down_payment }}" number> 
<input type="number" v-model="loan_amount" placeholder="Loan Amount" value="{{loan_amount }}" number>

我的JavaScript

new Vue({ 
    el: '#calculator', 
    data: { 
     asking_price: 60000, 
    }, 
    computed: { 
     loan_amount: function(){ 
      return this.asking_price - this.downpayment; 
     }, 
     down_payment : function(){ 
      return this.asking_price - this.loan_amount; 
     }, 
    } 
});

来源

2016-08-23 user5296896

请张贴一些代码 – gurghet

你真的有两个独立的变量和计算，但必须是可写的，并在其制定者处理的依赖关系之一。

data: { 
    asking_price: 60000, 
    down_payment: 20 
    }, 
    computed: { 
    loan_amount: { 
     get: function() { 
     return this.asking_price - this.down_payment; 
     }, 
     set: function(newValue) { 
     this.down_payment = this.asking_price - newValue; 
     } 
    } 
    }

Fiddle

来源

2016-08-23 13:29:17

它完美的作品！谢谢！ – user5296896

我还在学习VUE我自己，但我不知道它是否会更好，只要定义b和c作为数据属性，然后在出现更改时使用watch重新计算一个或另一个（而不是使用计算结果）。事情是这样的：

 var vm = new Vue({ 
      el: '#calculator', 
      data: { 
      a: 10, 
      b: 0, 
      c: 10 
      }, 
      watch: { 
      'b' : function(newVal, oldVal) { 
       this.c = this.a - newVal; 
      }, 
      'c' : function(newVal, oldVal) { 
       this.b = this.a - newVal; 
      } 
      } 
     });

来源

2016-08-23 13:29:04 PatrickSteele

谢谢您的答复。我尝试过，但似乎没有工作。 – user5296896

Vue.js：将两个输入互相绑定

回答

相关问题