Vue.js - 输入、v-model 和计算属性 [英] Vue.js - Input, v-model and computed property

问题描述

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

情况

我有一个基本的input，它与v-model 链接到一个计算属性.当 blur 我检查输入的值是否大于或小于 min 和 max 并且我做我必须做的事情......没什么特别的在这里.

问题

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

重现步骤

1) 输入 60 --> 显示的值是最大值所以 50 和 enteredValue 是 50 (没关系)

2) 点击外部

3) 输入80 --> 显示值为80，enteredValue为50

问题

如何解决这个问题，使显示的值始终与 enteredValue 相同?

这是重现我面临的问题的最少代码JSFIDDLE

 
变量enteredValue 是{{enteredValue}}<el-input v-model="measurementValueDisplay" @blur="formatInput($event)"></el-input>
变量主 = {数据() {返回 {输入值:''，最大:50，分钟:10}},计算:{测量值显示:{得到:函数(){返回 this.enteredValue + '英寸'},设置:函数(新值){}},},方法: {格式输入($事件){让 inputValue = $event.currentTarget.value;if (inputValue > this.max) { this.enteredValue = this.max}else if (inputValue < this.min) { this.enteredValue = this.min}否则 this.enteredValue = inputValue}}}var Ctor = Vue.extend(Main)newctor().$mount('#app')

解决方案

阅读本文 vuejs，会明白发生了什么

"计算的属性根据它们的依赖关系进行缓存.计算属性只会在其某些依赖项发生更改时重新评估."

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

var Main = {数据() {返回 {测量值显示:'fff'，输入值:''，最大:50，分钟:10}},计算:{/*测量值显示:{得到:函数(){console.log('Computed 被触发，所以我假设 enterValue 已更改',this.enteredValue);返回 this.enteredValue + '英寸'},设置:函数(新值){console.log('setter de qye', this.enteredValue);}},*/},方法: {格式输入($事件){this.enteredValue = 0;让 inputValue = $event.currentTarget.value;控制台日志(输入值)；if (inputValue > this.max) { this.enteredValue = this.max}else if (inputValue < this.min) { this.enteredValue = this.min}否则 this.enteredValue = inputValuethis.measurementValueDisplay = this.enteredValue + '英寸'console.log(this.enteredValue, 'oioioioio0');}}}var Ctor = Vue.extend(Main)newctor().$mount('#app')

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)

2) Click outside

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

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')

解决方案

Reading this vuejs, will understand what happens

"computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed."

Changed some comportament of the code. Made run: computed() method not works properly for update value in window. But if looks at console the value yes updated. So, i remove computed (getter and setter), and put into data, without setter and 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')

这篇关于Vue.js - 输入、v-model 和计算属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！