Question

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

场合

我有一个基本input与v-model与computed property相关联。当blur我检查输入的值是大于还是小于min和max时，我会做我必须做的事情......这里没什么好看的。

问题

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

重现的步骤

1）输入60 - ＆gt;显示的值是最大值，因此50和enteredValue是50（可以）

2）点击外面

3）输入80 - ＆gt;显示的值为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，将了解会发生什么

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

更改了代码的某些内容。制作运行： Computed（）方法不适用于窗口中的更新值。但是如果查看控制台，则更新值为yes。所以，我删除了计算器（getter和setter），并放入数据，没有setter和getter ( i dont like this in 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')

Answer 2

您的问题是计算属性中使用的值未更新，验证上限为50（50为50，现在更新为50，无需重新计算），因此v-model未更新输入。

我编辑了你的jsFiddle以使用两个计算属性：
一个带有访问器来验证输入的值，一个用＆＃34;返回值。寸＆＃34;追加。

https://jsfiddle.net/0gxb0fw8/4/

这是有趣的部分：

computed: {
      measurementValueDisplay: {
          get: function () {
              return this.enteredValue
          },
          set: function (newValue) {
             this.enteredValue = 0;
             let inputValue = parseInt(newValue);
             if(Number.isNaN(inputValue)){this.enteredValue = this.min}
             else if (inputValue > this.max) { this.enteredValue = this.max}
             else if (inputValue < this.min) { this.enteredValue = this.min}
             else this.enteredValue = inputValue
          }
     },
     valueWithInch(){
        return this.enteredValue + " inch";
         }
  },

Answer 3

如果有人仍然需要对此进行破解，您可以使用一个始终会更改的值（例如时间戳）

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
      }
  }
}

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

场合

问题

重现的步骤

问题

3 个答案: