Vue.js: Binding two input to each other

Question

I'm currently starting on using vue.js, and have encountered a situation.

I wish to bind two inputs for example C = A - B. and B = A - C, where A is constant and a change in B or C will affect the other.

I successfully bind C using v-model and placing it in computed. However, when I tried the same for B, it ran into an infinite loop.

This should be something very simple however, I can't seem to find a solution to it. Any help is appreciated thank you!

Edit: Code is included below. I wish for use the be able to key into either down_payment or loan_amount. After which it will calculate the other value automatically. However this way seems to make it go into a infinite loop

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

My 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

You really have two independent variables and one that is computed but needs to be writable and handle the dependencies in its 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;
       }
     }
   }

Fiddle