Question

我目前正在开始使用vue.js，遇到过这种情况。

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

我使用v-model成功绑定C并将其置于计算中。但是，当我为B尝试相同时，它会遇到无限循环。

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

编辑：代码包含在下面。我想使用能够键入down_payment或loan_amount。之后它会自动计算其他值。然而，这种方式似乎使它进入无限循环

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">         
      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>

</div>

我的javascript

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

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

Fiddle

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

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

2 个答案: