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>

两个“花费”值取决于静态“总”值。我将存储spent_dollar，百分比最初将从中得出。

现在，如果用户更新百分比，我需要更新美元值。如果他们更新美元价值，我需要更新百分比。

截至目前，它显然不起作用。正在进行循环更新。如何在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
      }
    }
  }
})

Vue.js循环计算属性

1 个答案: