相互影响的Vue js监视函数触发无限循环

Question

我使多个Vue手表功能相互影响。 但这似乎并没有达到我的预期。

当用户选项卡'vinput01'更改时，vinput02仅在vinput01功能下更改。并且，当用户使用标签“ vinput02”更改值时，“ vinput02”仅在vinput02功能下更改。

但是现在，我的代码触发了无限循环。 更改“ vinput01”会同时影响“ vinput02”，而“ vinput02”会同时影响“ vinput01”。

这是我的代码。 我如何避免这个问题？

data () {
  return {
   vinput01: '',
   vinput02: '',
  }
},
watch: {
 vinput01: function(_val) {
 this.vinput02 = _val *1.1
},
 vinput02: function(_val) {
 this.vinput01 = _val / 1.1
}

Answer 1

您需要拥有一个“真理之源”的属性。您的问题确实是，您有两个竞争的价值观。为此，您可以使用getter和setter将其中一个属性设置为主值，将另一个属性设置为计算属性。可以在here和出色的vuejs文档here中找到有关此问题的好文章。

示例代码：

data(){
  return {
    vinput01:0,
  }
},
computed: {
  vinput02: {
    get: function(){
      return this.vinput01 * 1.1;
    },
    set: function(_val){
      this.vinput01 = _val / 1.1;
    }
  }
}