Вычисляемые свойства зависят друг от друга с различным поведением на Vue 1 и 2 - PullRequest
Новая
       97

Вычисляемые свойства зависят друг от друга с различным поведением на Vue 1 и 2

0 голосов
/ 28 мая 2020

У меня проблема с полями ввода с форматированными числами, каждое из которых содержит вычисленное свойство. Когда я меняю ввод, Vue автоматически пересчитывает число, и я не смогу ввести именно то, что мне нужно. Это происходит только с Vue 2. 

new Vue({
  el: '#vue-app',

  data: function() {
    return {
      direction: 'hi',
      target: 49.99,
      maxRoll: Big(99.99),
      oddsDividend: Big(100),
    }
  },
  watch: {
    direction: function() {
      this.target = this.maxRoll.minus(this.target).abs()
    }
  },
  computed: {
    chance: {
      get: function() {
        return this.direction === 'hi' ?
          this.maxRoll.minus(this.target).toFixed(2) :
          Big(this.target).toFixed(2)
      },
      set: function(newValue) {
        this.target = this.direction === 'hi' ?
          this.maxRoll.minus(newValue).toFixed(2) :
          Big(newValue).toFixed(2)
      }
    },
    odds: {
      get: function() {
        return this.direction === 'hi' ?
          this.oddsDividend.div(this.maxRoll.minus(this.target)).toFixed(4) :
          this.oddsDividend.div(this.target).toFixed(4)
      },
      set: function(newValue) {
        this.target = this.direction === 'hi' ?
          this.oddsDividend.div(newValue).minus(this.maxRoll).abs().toFixed(2) :
          this.oddsDividend.div(newValue).toFixed(2)
      }
    },
  }
});

В качестве примера приведем скрипт с Vue 2: https://jsfiddle.net/fc4b60n3/ Попробуйте ввести число 234 или любое другое. число во втором поле ввода. Он захватит только первый di git и выполнит все вычисления с ним.

Теперь с Vue 1: https://jsfiddle.net/fc4b60n3/1/ Здесь вы можете ввести полное число, например 234 и только когда вы теряете фокус ввода, он пересчитывает собственное вычисленное свойство. Это то поведение, которое я хочу, но я должен использовать для него Vue 1, и он несовместим с моей текущей настройкой.

Так что мои вопросы. Что изменилось между этими Vue версиями, чтобы вызвать это? Как сделать так, чтобы код работал так, как я хочу, используя Vue 2?

РЕДАКТИРОВАТЬ Тема форума, чтобы синхронизировать все c: https://forum.vuejs.org/t/96370

1 Ответ

1 голос
/ 28 мая 2020

я думаю, что v-модель на v1 использует событие onchange (подождите, пока не потеряете фокус, затем измените) на v2 оно использует событие oninput (как только вы вводите новую строку)

, чтобы исправить в вашем коде используйте v-bind:value и onChange event, чтобы установить это значение вместо v-model

...