Смотрите две взаимосвязанные переменные на Vue - PullRequest
Новая
       34

Смотрите две взаимосвязанные переменные на Vue

1 голос
/ 19 марта 2019

У меня есть две переменные, например, priceInUSD и priceInRub и курс USD / рубль. 

data: () => ({
  priceInUSD: 0,
  priceInRub: 0,
  rate: 65.395402,
});

При изменении пользователяодна переменная, вторая должна быть пересчитана.Но если я использую watch () для обоих, это вызывает избыточный вызов вычислений и потенциально бесконечный цикл.Один пересчитывающий вторую, второй вызывающий элемент для первого, первый вызывающий элемент для второго и в бесконечности.

Когда я использую вычисления и методы получения / установки ... 

computed: {
priceInUSD: {
  get(){
    return this.statePriceInUSD;
  },

  set(newValue){
    this.statePriceInUSD = newValue;
    this.statePriceInRub = newValue * this.rate;
  }
},

priceInRub: {
  get(){
    return this.statePriceInRub;
  },

  set(newValue){
    this.statePriceInRub = newValue;
    this.statePriceInUSD = +newValue / this.rate;
  }
},
}

...это тоже вызывает избыточный перерасчет другой переменной.

  1. Изменение цены в долларах США
  2. Пересчет цены в рублях (ок)
  3. Перезапуск повторного пересчетацена в долларах США (не в порядке)

Можно ли пересчитать две взаимосвязанные переменные, без избыточного пересчета первой переменной?

1 Ответ

0 голосов
/ 20 марта 2019

Это решение работает (вы, вероятно, облажались с переменными): 

new Vue({
  el: "#app",
  data: {
    statePriceInUSD:0,
    statePriceInRub: 0,
    rate: 65.395402,
  },
  computed: {
   priceInUSD: {
     get(){
       return this.statePriceInUSD;
     },

     set(newValue){
        console.log('USD new value: ' + newValue);
        this.statePriceInUSD = newValue;
        this.statePriceInRub = newValue * this.rate;
     }
},

priceInRub: {
  get(){
    return this.statePriceInRub;
  },

  set(newValue){
      console.log('RUB new value: ' + newValue);
      this.statePriceInRub = newValue;
      this.statePriceInUSD = +newValue / this.rate;
   }
},
}
})

Рабочий пример здесь https://jsfiddle.net/a4ped21h/

...