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

Question

用文字解释我想要实现的目标对我来说很困难，因为我对 vue.js 很陌生。

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

好的，在沙拉这个词之后，这是我需要的确切行为的示例。

您可以在任一输入中键入一个值，另一个输入将显示转换。我怎样才能以最好的方式实现这一目标？有没有办法避免 hacky 解决方案，例如条件取决于哪个框处于活动状态的 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>