Vue.js - 输入、v-model 和计算属性答案

【问题标题】：Vue.js - Input, v-model and computed propertyVue.js - 输入、v-model 和计算属性
【发布时间】：2018-01-09 21:21:39
【问题描述】：

我正在使用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')

【问题讨论】：

我试过 ton iput 80，正如你所说，但两者都显示 50，就像代码说的那样
先输入60然后在框外点击触发blur再在框内点击输入80
nshow 50 而不是 80
我不确定我理解你的意思。您是否按照这些步骤进行操作？你得到的和我发布的一样吗？
@Leo Oke，但使用计算属性作为输入模型对我来说感觉像是一种反模式。他们只是默认情况下是吸气剂是有原因的。主要目的是缓存一个操作的结果，只有在底层数据属性发生变化时才重新计算。不要将该结果用作反应模型。此外，由于字符串附加，使用计算结果作为输入使验证更加困难。

标签： vuejs2

【解决方案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')

【讨论】：

这就是为什么我把this.enteredValue = 0;这样输入的值改变了
@Leo 是的，但每次都不能正常工作，不是 deteds 窗口更改以更新它
我想使用computed property，但我最终按照您的建议将其用作变量。

【解决方案2】：

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

我已编辑您的 jsfiddle 以使用两个计算属性：
一种带有验证输入值的访问器，一种返回附加“英寸”的值。

这是有趣的部分：

    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";
             }
      },

【讨论】：

我喜欢它，但尝试通过保持 0 向下输入 500000。您将能够在框中获得 50000 和 50 作为值
你是对的，这和之前的问题一样，我会稍微弄乱代码以找到更好的解决方案

【解决方案3】：

如果有人仍然需要对此进行破解，您可以使用一个始终会更改的值（例如 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
      }
  }
}

【讨论】：