当一个字段发生变化时更新一个字段 - Vue

Question

我正在尝试创建一个双向计算器，我选择使用英寸到毫米作为示例。

在此处查看沙箱：https://q8y4s.csb.app/

<template>
  <div>
    <input type="number" v-model="inches" placeholder="Inches" />
    <br />
    <input type="number" v-model="mm" placeholder="Millimeters" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inches: "",
      mm: "",
    };
  },
  watch: {
    inches: function (newVal) {
      this.mm = newVal * 25.4;
    },
    mm: function (newVal) {
      this.inches = newVal / 25.4;
    },
  },
};
</script>

问题从毫米到英寸。我不完全确定发生了什么，但它似乎是某种反馈循环。我知道我可以使用计算来实现这个特定的功能，但我更喜欢使用观察者，因为我的项目中的 'watched' 字段有更多逻辑。

这个 tutorial 使用米换算公里并完成同样的事情，但我不确定为什么毫米换算英寸会产生 'feedback loop' 效果

Answer 1

您可以做的是创建一个安全阀来防止递归。类似于：

export default {
  data() {
    return {
      isChangingMm: false,
      isChangingInches: false,
      // others
    }
  },
  watch: {
    inches: function (newVal) {
      if (!this.isChangingMm) {
        this.isChangingInches = true
        this.mm = newVal * 25.4
        this.isChangingInches = false
      }
    },
    mm: function (newVal) {
      if (!this.isChangingInches) {
        this.isChangingMm = true
        this.inches = newVal / 25.4
        this.isChangingMm = false
      }
    }
  },
}

当一个字段发生变化时更新一个字段 - Vue

Update one field when the other changes - Vue

javascript

watch

vuejs2