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：將兩個輸入互相綁定

回答

相關問題