Vue.js-输入，v模型和计算属性

Question

我正在使用vue-2.4和element-ui 1.4.1。

情况

我有一个基本input的链接v-model到一个computed property。当blur我检查输入的值是否大于和小于min和max并且我要做我必须做的事情...这里没什么好看的。

问题

输入中显示的值并不总是相等 enteredValue

重现步骤

1）输入60 - >显示的值为最大，以便50与enteredValue是50（这是确定）

2）点击外面

3）输入80 ->显示的值是80和enteredValue是50

问题

我该如何解决，使显示的值始终与enteredValue？相同？

这是重现我所面对的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')

Answer 1

阅读这个vuejs，就会明白发生了什么

"计算属性根据其依赖项进行缓存。计算属性仅在其某些依赖项发生更改时才会重新评估。 "

更改了代码的一些comportament。Made run: computed()方法对于窗口中的更新值无法正常工作。但是，如果查看控制台，则值 yes 已更新。所以，我删除了计算的（getter 和 setter），并放入了数据中，没有 setter 和 getter （我不喜欢这个在 javascript 中）。

var Main = {
  data() {
    return {
      measurementValueDisplay:'fff',
      enteredValue: '',
      max: 50,
      min: 10
    }
  },
  computed: {
      /*measurementValueDisplay: {
          get: function () {
              console.log('Computed was triggered so I assume enteredValue changed',this.enteredValue);
              return this.enteredValue + ' inchs'
          },
          set: function (newValue) {
          console.log('setter de qye', this.enteredValue);
          }
      },*/
  },
  methods: {
      formatInput($event) {
          this.enteredValue = 0;
          
          let inputValue = $event.currentTarget.value;
          console.log(inputValue);
          if (inputValue > this.max) { this.enteredValue = this.max}
          else if (inputValue < this.min) { this.enteredValue = this.min}
          else this.enteredValue = inputValue
          this.measurementValueDisplay = this.enteredValue + ' inchs'
          
          console.log(this.enteredValue, 'oioioioio0');
      }
   }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')