Vue.js круговые вычисленные свойства

Question

У меня есть приложение, которое требует обновления двух полей, которые зависят друг от друга по своим значениям.

Например:

<template>
    <tr>
        <td>{{total}}</td>
        <td><input type="text" v-model="calculateEarnedPercentage" @change="updatedForecastPercentage"></td>
        <td><input type="text" v-model="spent_dollar"></td>
    </tr>
</template>

<script>
    export default {
        data () {
            return {
                total: 1000000,
                spent_percentage: '',
                spent_dollar: 20000,
            }
        },
        methods: {
            updatedForecastPercentage () {
                this.vendor.regional_forecast_dollar = this.vendor.purchases / (this.vendor.regional_forecast_dollar / 100)
            }
        },
        computed: {
            calculateEarnedPercentage () {
                return (this.vendor.regional_forecast_dollar / this.vendor.purchases) * 100
            }
        }
    }
</script>

Два "потраченных" значения зависят от статического "общего" значения. Я буду хранить отработанный доллар, и процент будет первоначально получен из этого.

Теперь, если пользователь обновляет процент, мне нужно значение в долларах для обновления. Если они обновляют стоимость в долларах, мне нужен процент для обновления.

На данный момент это явно не работает. Циркулярные обновления происходят. Как вы проектируете свои данные, чтобы разрешить эту функциональность в Vue.js?

Answer 1

Похоже, вы могли бы использовать некоторые часы и мьютекс. Используя идею параллельной обработки, я построил JSfiddle, чтобы продемонстрировать эту идею.

<div id="app">
  <span>{{ total }}</span>
  <span><input type="text" v-model.number.lazy="spent_percentage"></span>
  <span><input type="text" v-model.number.lazy="spent_dollar"></span>

  <pre>{{ $data }}</pre>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      total: 1000000,
      spent_percentage: 5.0,
      spent_dollar: 20000,
      mutex: false,
      vendor: {
        purchases: 2358,
        regional_forecast_dollar: 1
      }
    }
  },
  watch: {
    spent_percentage: function(value, old_value) {
      if (!this.mutex) {
        this.mutex = true

        this.spent_dollar = (this.vendor.purchases * value) / 100;
        this.spent_percentage = value;

        this.mutex = false
      }
    },
    spent_dollar: function(value, old_value) {
      if (!this.mutex) {
        this.mutex = true

        this.spent_dollar = value;
        this.spent_percentage = (value / this.vendor.purchases) * 100;

        this.mutex = false
      }
    }
  }
})