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

【问题标题】：Vue.js: Binding two input to each otherVue.js：将两个输入相互绑定
【发布时间】：2016-12-29 20:23:42
【问题描述】：

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

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

我成功地使用 v-model 绑定了 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;
        },
    }
 });

【问题讨论】：

请贴一些代码

标签： vue.js

【解决方案1】：

您确实有两个自变量，一个是计算的，但需要可写并在其设置器中处理依赖关系。

   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

【讨论】：

【解决方案2】：

我自己还在学习 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;
            }
          }
        });

【讨论】：

感谢您的回复。我试过了，但它似乎不起作用。