Двухстороннее связывание данных VueJS

Question

Я хотел бы динамически изменять значения amount и total, используя двустороннюю привязку данных Vue.Для данного продукта price исправлено.Когда пользователи изменят amount, будет рассчитано total = amount * total.Аналогичным образом пользователи могут ввести total и amount = total / price будет рассчитано.Я потерян в этот момент:

var app = new Vue({
  el: '#app',
  data: {
    amount: 1,
    price: 100,
  },
  computed: {
    calcTotal: function() {
      return this.total =
        parseFloat(this.amount) *
        parseFloat(this.price)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  amount: <input v-model="amount"> <br><br> price: <input v-model="price" disabled> <br><br> total: <input v-model="calcTotal"> <br><br>

</div>

Answer 1

Вместо вычисленного свойства (calcTotal) вы можете прослушать на input -вент из <input> s для amount и total:

<input type="number" v-model="amount" @input="onAmountChange">
<input type="number" v-model="total" @input="onTotalChange">

Обработчик для amount <input> установит значение total <input>, и наоборот:

  data() {
    return {
      amount: 0,
      total: 0,
      price: 100,
    }
  },
  methods: {
    onTotalChange(e) {
      const total = e.currentTarget.value;
      this.amount = total / this.price;
    },
    onAmountChange(e) {
      const amount = e.currentTarget.value;
      this.total = amount * this.price;
    }
  }

new Vue({
  el: '#app',
  data() {
    return {
      amount: 0,
      total: 0,
      price: 100,
    }
  },
  methods: {
    onTotalChange(e) {
      const total = e.currentTarget.value;
      this.amount = total / this.price;
    },
    onAmountChange(e) {
      const amount = e.currentTarget.value;
      this.total = amount * this.price;
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <div>amount: <input type="number" v-model="amount" @input="onAmountChange"></div>
  <div>price: <input type="number" v-model="price" disabled></div>
  <div>total: <input type="number" v-model="total" @input="onTotalChange"></div>
</div>