Логическая проблема в приложении Vue вызывает бесконечный цикл из-за зависимых переменных - PullRequest
Новая
       14

Логическая проблема в приложении Vue вызывает бесконечный цикл из-за зависимых переменных

0 голосов
/ 16 октября 2018

Я работаю над приложением vue, которое может конвертировать из фиатной валюты в криптовалюту и наоборот.Демонстрацию приложения можно найти здесь: Демо .

Вы заметите, что вычисление выполнено и отображается в противоположном поле ввода автоматически при вводе текста.Проблема в том, что в настоящее время приложение просто следит за изменениями переменных, привязанных к входам.

Мне также нужно, чтобы этот расчет выполнялся, когда пользователь выбирает другой выбор из поля выбора.

Я изо всех сил пытался придумать, как это сделать, не вызывая бесконечный цикл.

Вот моя наивная попытка: codepen .

В настоящее время я понимаю, почему это происходит.не работа, потому что: 

...input1 changes -> watch input1 called -> watch input1 modifies 
input2 -> watch input2 called -> watch input2 modifies input1....

Что представляет собой бесконечный цикл.Должна быть часть Vue, с которой я еще недостаточно знаком, чтобы решить эту проблему.

Спасибо,

1 Ответ

0 голосов
/ 16 октября 2018

Использовать прослушиватель событий @input.При изменении значения в одном входе, который изменился, будет обновляться значение другого входа. 

<template>
  <div>
    <input v-model="value1" @input="update2"> 
    to 
    <input v-model="value2" @input="update1">
  </div>
</template>

<script>
const mul = 1.5;
export default {
  data: () => ({
    value1: null,
    value2: null
  }),
  methods: {
    update1() {
      this.value1 = this.value2 / mul;
    },
    update2() {
      this.value2 = this.value1 * mul;
    }
  }
};
</script>

Вы можете сделать это с помощью watch, но тогда вам нужно будет предотвратить цикл обновления с помощьюдополнительная проверка: 

watch: {
  value1(val) {
    const tmp = val * mul;
    if (tmp !== this.value2) {
      this.value2 = tmp;
    }
  },
  value2(val) {
    const tmp = val / mul;
    if (tmp !== this.value1) {
      this.value1 = tmp;
    }
  }
},

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

Поэтому я рекомендую подход «слушатель события ввода».

...