将vuejs中的2个输入与中间的计算进行双重链接

Question

因为我对vue.js还是陌生的，所以很难用语言解释我要实现的目标。

我知道我可以使用v模型将输入链接到变量，但是，我想将输入链接到变量，进行计算，然后在另一个输入中显示它。我还需要其他输入进行逆运算，并将结果显示在第一个输入中。

好吧，在说完“色拉”一词之后，下面是我需要的确切行为的一个例子。

您可以在任一输入中键入一个值，其他输入将显示转换。我怎样才能最好地做到这一点？有没有办法避免诸如条件语句依赖于哪个盒子处于活动状态的if语句之类的骇人解决方案？

此外：在我理解正确的逻辑之后，我将把所有这些都移到Vuex中吗？ vuex中的某些东西可以完全解决这种情况吗？

Answer 1

为此，您可以将<input>元素绑定到计算的属性，每个属性都具有一个setter。

更新一个输入时，可以相应地设置两个输入的值。

例如...

const mul = 1.5

new Vue({
  el: '#app',
  data: {
    val1: null,
    val2: null
  },
  computed: {
    input1: {
      get () {
        return this.val1
      },
      set (val) {
        this.val1 = val
        this.val2 = (val * mul).toFixed(2) // multiply to set val2
      }
    },
    input2: {
      get () {
        return this.val2
      },
      set (val) {
        this.val2 = val
        this.val1 = (val / mul).toFixed(2) // divide to set val1
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<p>
<label for="input1">Input #1:</label>
<input id="input1" v-model="input1" type="number">
</p>
<p>
<label for="input2">Input #2:</label>
<input id="input2" v-model="input2" type="number">
</p>
</div>