VueJs - 具有新旧输入值的方法[重复]答案

【问题标题】：VueJs - Method with old and new value of input [duplicate]VueJs - 具有新旧输入值的方法[重复]
【发布时间】：2020-05-03 13:34:44
【问题描述】：

模板：

<input type="number" min="0" class="form-control" @change="get_values($event)" v-model="value" required />

状态：

data(){
  return {
    value: ""
  }
}

方法：

get_values (event) {
   var value = event.target.value
}

我得到了当前值，但是当我在输入中添加 +1 时，我没有找到如何获取旧值

有什么想法吗？

【问题讨论】：

你在问什么？
我问你是否知道如何获取旧值（例如，我有一个数字 2，我加一个，然后它返回给我（2 和 3），因为旧的和新的
为值添加观察者
如果观察者不是一个选项，请检查：stackoverflow.com/questions/42197822/…
这能回答你的问题吗？ Vuejs get old value when on change event

标签： javascript vue.js frontend

【解决方案1】：

如果您在输入更新时只需要旧值，请使用观察者，您不需要监听事件：

export default {
    data() {
        return {
            value: ""
        }
    },
    watch: {
        value(newValue, oldValue) {
            console.log("You now have the new value: ", newValue, "and the old value: ", oldValue);
        }
    }
}

【讨论】：

有办法吗？
并非如此。您应该使用watcher，因为它是专门为您的用例设计的（您需要观察值的变化以及这些变化之间的差异）
好的，谢谢您的回答

【解决方案2】：

您可以使用 set() get() 方法实现 v-model。这将为如何设置值提供很大的灵活性。它将允许您将数据设置为不同于根据条件输入的内容：

var app = new Vue({
  el: '#app',
  data(){
    return {
      value: ""
    }
  },
  computed:{
    values: {
      get(){return this.value},
      set(v){
        console.log('old:', this.value)
        // loop values -- only allow 0-9
        this.value = v < 10 ? v : 0
        console.log('new:', this.value)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" min="0" class="form-control"  v-model="values" required />
 </div>

【讨论】：

我试试谢谢

【解决方案3】：

你可以用观察者试试：

data(){
  return {
     value: ""
  }
},
watch: {
   value:function(newValue, oldValue){
      console.log(newValue)
      console.log(oldValue)
   }
}

重要的是 watch 方法与数据属性中定义的value 具有相同的名称。

【讨论】：

有办法吗？
你想达到什么目标，如果我知道你的问题，也许我可以帮助你
实际上我的值在一个循环中所以我不能真正添加一个观察者这就像 return { data: [{value: ' ' }] } 所以我尝试了一个方法
@LucasLaurens 什么样的循环？
我还是不知道你想要什么

【解决方案4】：

你也可以使用getter和setter：

data(){

    return {
      value_: 2,
      get value() {
        return this.value_
      },
      set value(val){
        console.log(/*new*/val, /*old*/this.value_)
        this.value_ = val
      }
    }
  },

【讨论】：

似乎是正确的，我会尝试谢谢你;）
jsfiddle.net/fa0m9ktd
我尝试了与计算相同的事情，我认为这是正确的