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>

双向数据绑定与Vue.JS中的计算？

1 个答案: