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

Question

我目前开始使用 vue.js，遇到了一个情况。

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

我使用 v-model 成功绑定了 C 并将其放置在计算中。但是，当我为 B 尝试相同的方法时，它陷入了无限循环。

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

编辑：代码包含在下面。我希望能够输入 down_payment 或贷款金额。之后它将自动计算另一个值。然而，这种方式似乎使它进入无限循环

<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;
        },
    }
 });

Answer 1

你真的有两个独立变量，一个被计算但需要可写并在其 setter 中处理依赖项。

   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;
       }
     }
   }

小提琴