Question

我有一个vue（版本2.x）文件，其中有3个字段 - input1 x input2 = result

现在，当我更改其中任何一个时，其他两个应该动态更新。我尝试使用watch属性，但这导致无限循环，因为观察者不断互相呼叫。

我在这里缺少任何与vue相关的助手吗？任何帮助，将不胜感激。

请参阅此示例代码。

<template>
  <input v-model="input1"></input>
  <input v-model="input2"></input>
  <input v-model="conversionRate"></input>
</template>

<script>
export default {
  data() {
    input1: null,
    input2: null,
    conversionRate: null
  },
  watch: {
    input1() {
      this.input2 = this.input1 * this.conversionRate
    },
    input2() {
      this.input1 = this.input2 * this.conversionRate
    },
    conversionRate() {
      this.input2 = this.input1 * this.conversionRate
    }
  }
}
</script>

Answer 1

由于所有三个模型都相互依赖，因此会导致无限循环。

根据您的要求，您可以使用computed setter。

HTML

<div id="app">
  <input type="number" placeholder="amount" v-model="inputA"> X
  <input type="number" placeholder="rate" v-model="conversionRate"> =
  <input type="number" placeholder="total" v-model="total">
</div>

SCRIPT

new Vue({
  el: "#app",
  data: {
    total: 0,
    conversionRate: 1
  },
  computed: {
    inputA: {
      get() {
        return this.total / this.conversionRate;
      },
      set(newVal) {
        this.total = newVal * this.conversionRate;
      }
    }
  }
});

以下是working fiddle

Answer 2

input2的观察者错误导致无限循环（如果计算基于浮点数，你最好使用Math.round），它应该是：

input2: function (newVal) {
   this.input1 = newVal / this.conversionRate // not newVal*this.conversionRate
}

但@Vamsi Krishna应该是一个更好的解决方案。

演示：

app = new Vue({
  el: "#app",
  data: function () {
    return {
      input1: null,
      input2: null,
      conversionRate: 1
    }
  },
  watch: {
    input1: function (newVal) {
      this.input2 = newVal * this.conversionRate
    },
    input2: function (newVal) {
      this.input1 = newVal / this.conversionRate
    },
    conversionRate: function (newVal) {
      this.input2 = this.input1 * newVal
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <input v-model="input1">
  <input v-model="input2">
  <input v-model="conversionRate">
</div>

vuejs - 在同一文件中同步变量

2 个答案:

HTML

SCRIPT