vue.js - 双向数据绑定(bind)与 Vue.JS 中的计算？

Question

在 Vue.JS 中，我有两个输入框，您可以在其中输入值。

我想在输入第一个框中时更改另一个框中的值，反之亦然。但同时也要进行计算。

我试过使用两个观察者，但它似乎坏了。

例子:

<template>
  <input v-model="box1">
  <input v-model="box2">
</template>

<script>
watch: {
  box1: function (val) {
    this.box2 = val + 100
  },
  box2: function (val) {
    this.box1 = val - 100
  }
},
</script>

当您调整第二个框中的值时，这会中断。

这可以在 Vue 中实现吗？

Answer 1

一种解决方案是使用方法代替 watch:

<template>
  <input :value="box1" @input="onBox1Input">
  <input :value="box2" @input="onBox2Input">
</template>

<script>
methods: {
  onBox1Input(value) {
    this.box1 = value
    this.box2 = value + 100
  },
  onBox2Input(value) {
    this.box2 = value
    this.box1 = value - 100
  }
}
</script>