двойное связывание 2 входов в vuejs с вычислением в середине

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>