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

Javascript 相互影响的Vue js监视函数触发无限循环,javascript,vue.js,Javascript,Vue.js,我已经制作了多个Vue手表功能,它们相互影响。 但它似乎并没有像我预期的那样运行 当用户选项卡“vinput01”更改时,vinput02仅在vinput01功能下更改。当用户选项卡“vinput02”和更改值时,“vinput02”仅在vinput02函数下更改 但现在,我的代码触发了无限循环。 更改“vinput01”会影响“vinput02”,而“vinput02”会同时影响“vinput01” 这是我的密码。 我怎样才能避免这个问题 data () { return { vin

我已经制作了多个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
}

你需要有一个属性,它是“真理之源”。你的问题是你有两种价值观在竞争。为此,可以使用getter和setter将一个属性设置为主值,另一个属性设置为计算属性。在优秀的vuejs文档中可以找到一篇关于这方面的好文章

示例代码:

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

你需要有一个属性,它是“真理之源”。你的问题是你有两种价值观在竞争。为此,可以使用getter和setter将一个属性设置为主值,另一个属性设置为计算属性。在优秀的vuejs文档中可以找到一篇关于这方面的好文章

示例代码:

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