Vue.js - Input, v-model and computed property

user_6068447 0
Viewed 39504

I'm using vue-2.4 and element-ui 1.4.1.

Situation

I have a basic input which is linked with v-model to a computed property. When blur I check if the value input is greater or lower than min and max and I do what I have to do ... Nothing fancy here.

Problem

The value displayed in the input does not always equal enteredValue

Steps to reproduce

1) Input 60 --> Value displayed is the max so 50 and enteredValue is 50 (which is ok)

enter image description here

2) Click outside

3) Input 80 --> Value displayed is 80 and enteredValue is 50

enter image description here

Questions

How can I fix that so the value displayed is always the same as the enteredValue ?

Here is the minimal code to reproduce what I'm facing JSFIDDLE

    <div id="app">
  The variable enteredValue is {{enteredValue}}
  <el-input v-model="measurementValueDisplay" @blur="formatInput($event)"></el-input>
</div>

var Main = {
  data() {
    return {
      enteredValue: '',
      max: 50,
      min: 10
    }
  },
  computed: {
      measurementValueDisplay: {
          get: function () {
              return this.enteredValue + ' inchs'
          },
          set: function (newValue) {
          }
     },
  },
  methods: {
      formatInput($event) {
         let inputValue = $event.currentTarget.value;
         if (inputValue > this.max) { this.enteredValue = this.max}
         else if (inputValue < this.min) { this.enteredValue = this.min}
         else this.enteredValue = inputValue
      }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
vuejs2
3 Answers

In case anybody still needs a hack for this one, you can use a value that will always change ( for example a timestamp )

var Main = {
  data() {
    return {
      enteredValue: '',
      max: 50,
      min: 10,
      now: 1 //line added
    }
  },
  computed: {
      measurementValueDisplay: {
          get: function () {
              return (this.now - this.now + 1 ) * this.enteredValue + ' inchs'; //line changed
          },
          set: function (newValue) {
              this.now = Date.now(); //line added
          }
     },
  },
  methods: {
      formatInput($event) {
         let inputValue = $event.currentTarget.value;
         if (inputValue > this.max) { this.enteredValue = this.max}
         else if (inputValue < this.min) { this.enteredValue = this.min}
         else this.enteredValue = inputValue
      }
  }
}
user_44820940
Related